Skip to main content
se eliminaron 126 caracteres en el cuerpo
Origen Enlace
Marcos Martínez
  • 2.3k
  • 1
  • 13
  • 21

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 class column-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 sus td (obtenidas mediante .find()), agregando sus valores a un textarea

$("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>

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"
  • Para cada td con class column-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 sus td (obtenidas mediante .find(), agregando sus valores a un textarea

$("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;
  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>

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 class column-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 sus td (obtenidas mediante .find()), agregando sus valores a un textarea

$("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>

se eliminaron 126 caracteres en el cuerpo
Origen Enlace
Marcos Martínez
  • 2.3k
  • 1
  • 13
  • 21

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"
  • Para cada td con class column-4 se agrega el plus icon como elemento hijo
  • Para cada plus icon se agrega un onclick listener el cual, donde se invoca una función add que recibe el elemento ícono como parámetro
  • Esa función obtiene el tr mas cercano al ícono e itera sobre sus td (obtenidas mediante .find(), agregando sus valores a un textarea

  $("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 = add($(this));
   });

  function add(icon){
    var row = icon.closest("tr");     
    let tds = rowtr.find("td");             
    $(tds).each(function() {               
        $("#rowdata")[0].innerHTML += " "+  $(this).text();      
    });
    $("#rowdata")[0].innerHTML += "\n"
  });
tr{
  background-color:steelblue;
  color:#fff;
}

td{
  padding:20px;
  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>

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"
  • Para cada td con class column-4 se agrega el plus icon como elemento hijo
  • Para cada plus icon se agrega un onclick listener el cual invoca una función add que recibe el elemento ícono como parámetro
  • Esa función obtiene el tr mas cercano al ícono e itera sobre sus td (obtenidas mediante .find(), agregando sus valores a un textarea

  $("td.column-4").each(function(){
    $(this).append('<i class="fa fa-plus-circle" aria-hidden="true"></i>');
  });
  
  $(".fa-plus-circle").on("click", function(){
         add($(this));
   });

  function add(icon){
    var row = icon.closest("tr");     
    tds = row.find("td");             
    $(tds).each(function() {               
        $("#rowdata")[0].innerHTML += " "+  $(this).text();      
    });
    $("#rowdata")[0].innerHTML += "\n"
  }
tr{
  background-color:steelblue;
  color:#fff;
}

td{
  padding:20px;
  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>

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"
  • Para cada td con class column-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 sus td (obtenidas mediante .find(), agregando sus valores a un textarea

$("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;
  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>

Origen Enlace
Marcos Martínez
  • 2.3k
  • 1
  • 13
  • 21

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"
  • Para cada td con class column-4 se agrega el plus icon como elemento hijo
  • Para cada plus icon se agrega un onclick listener el cual invoca una función add que recibe el elemento ícono como parámetro
  • Esa función obtiene el tr mas cercano al ícono e itera sobre sus td (obtenidas mediante .find(), agregando sus valores a un textarea

  $("td.column-4").each(function(){
    $(this).append('<i class="fa fa-plus-circle" aria-hidden="true"></i>');
  });
  
  $(".fa-plus-circle").on("click", function(){
         add($(this));
   });

  function add(icon){
    var row = icon.closest("tr");     
    tds = row.find("td");             
    $(tds).each(function() {               
        $("#rowdata")[0].innerHTML += " "+  $(this).text();      
    });
    $("#rowdata")[0].innerHTML += "\n"
  }
tr{
  background-color:steelblue;
  color:#fff;
}

td{
  padding:20px;
  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>