2

Tengo una tabla de 5 columnas en html y casi 300 filas, la última columna no tiene datos , quiero insertar un icono de fontawesome y darle una acción mediante javascript, la cuál tome los datos de su fila y los ingrese en un textarea

Así esta el codigo:

function consultar(){
  $("td.column-4").append('<i class="fa fa-plus-circle" aria-hidden="true"></i>');
};
tr{
background-color:steelblue;
color:#fff;
}

td{
padding:20px;
}
<script src="https://use.fontawesome.com/141dcb7b72.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table class="table-12">
  <tr class="row-2 even" role="row">
    <td class="colunm-1">Firstname</td>
    <td class="colunm-2">Lastname</td> 
    <td class="colunm-3">Age</td>
    <td class="colunm-4">Agregar</td>
  </tr>
  <tr class="row-3 odd" role="row">
    <td class="colunm-1">Jill</td>
    <td class="colunm-2">Smith</td> 
    <td class="colunm-3">50</td>
    <td class="colunm-4"></td>
  </tr>
  <tr>
    <td class="colunm-1">Eve</td>
    <td class="colunm-2">Jackson</td> 
    <td class="colunm-3">94</td>
    <td class="colunm-4"></td>
  </tr>
</table>

2 respuestas 2

0

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>

1
  • Muchas gracias por la respuesta , vaya que me es de ayuda.
    – Maca
    Commented el 7 oct. 2017 a las 4:34
0

Posible error es que su clase es colunm y en JS lo hace con column por eso no añade el icono , además dicha función no se ejecuta al cargarse el DOM , quizá sería conveniente hacerlo.

$("td.colunm-4").append('<i class="fa fa-plus-circle" aria-hidden="true"></i>');

Se dio una respuesta con Jquery (aunque cambiando la clase funcionaría) , pero añadiré una opción para hacerlo solo con JS , sin Jquery , la explicación está dentro del código. Se empleó el método closest() para buscar la fila y insertAdjacentHTML() para añadir el icono.

var fourColumn = document.querySelectorAll('td.column-4'); //Obtenemos las columnas 
fourColumn.forEach(function(col){
    // Añadimos el icono a la columna
    col.insertAdjacentHTML('beforeend', '<i class="fa fa-plus-circle" aria-hidden="true"></i>');
});

//Obtenemos los iconos añadidos
var  icons = document.querySelectorAll('.fa-plus-circle');

icons.forEach(function(ic){
    // Añadimos el evento Click
    ic.addEventListener("click",function(){
        var row = this.closest('tr'); // Buscamos el Tr
        var columns = row.querySelectorAll('td'); // Todas las Columnas de la fila 
        var result = "";
        // Iteramos las columnas y añadimos su texto a la variable Result
        columns.forEach(function(col){ 
            result+= col.innerText + " ";
        });
        console.log(result); //Resultado
    });
});
tr{
background-color:steelblue;
color:#fff;
}

td{
padding:20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="table-12" >
    <thead>
        <tr >
            <th class="column-1">Firstname</th>
            <th class="column-2">Lastname</th> 
            <th class="column-3">Age</th>
            <th class="column-4">Agregar</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-1 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 class="row-2 odd" role="row">
            <td class="column-1">Eve</td>
            <td class="column-2">Jackson</td> 
            <td class="column-3">94</td>
            <td class="column-4"></td>
        </tr>
    </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.