Hice algunas modificaciones para llegar a una posible solución:
- Modifiqué las clases de las celdas que son encabezados para no tratarlas de la misma manera que las celdas de datos
- Había un typo error, "colunm" > "column"
- La 4ta columna tiene text-align center para que el ícono quede alineado
- Para cada
td
con classcolumn-4
se agrega el plus icon como elemento hijo - Para cada plus icon se agrega un onclick listener, donde se invoca una función que obtiene el
tr
mas cercano al ícono e itera sobre sustd
(obtenidas mediante .find()), agregando sus valores a untextarea
$("td.column-4").each(function(){
$(this).append('<i class="fa fa-plus-circle" aria-hidden="true"></i>');
});
$(".fa-plus-circle").on("click", function(){
let tr = $(this).closest("tr");
let tds = tr.find("td");
$(tds).each(function() {
$("#rowdata")[0].innerHTML += " "+ $(this).text();
});
$("#rowdata")[0].innerHTML += "\n"
});
tr{
background-color:steelblue;
color:#fff;
}
td{
padding:20px;
}
td.column-4{
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/141dcb7b72.js"></script>
<table class="table-12">
<tr class="row-2 even" role="row">
<td class="headercolumn-1">Firstname</td>
<td class="headercolumn-2">Lastname</td>
<td class="headercolumn-3">Age</td>
<td class="headercolumn-4">Agregar</td>
</tr>
<tr class="row-3 odd" role="row">
<td class="column-1">Jill</td>
<td class="column-2">Smith</td>
<td class="column-3">50</td>
<td class="column-4"></td>
</tr>
<tr>
<td class="column-1">Eve</td>
<td class="column-2">Jackson</td>
<td class="column-3">94</td>
<td class="column-4"></td>
</tr>
</table>
<textarea id="rowdata" rows="10" cols="50">
</textarea>