Enter a fontawesome icon) in a cell with javascript

Question

Enter a fontawesome icon) in a cell with javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I have a table of 5 columns in html and almost 300 rows, the last column has no data , I want to insert a fontawesome icon and give it an action using javascript, which takes the data from your row and enter them in a textarea

Here's the code:

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>

javascript html5 font-awesome

asked by Maca 07.10.2017 в 05:51

source

2 answers

0

Possible error is that its class is colunm and in JS it does it with column so it does not add the icono , also this function does not run when the DOM loads, maybe it would be convenient to do it.

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

An answer was given with Jquery (although changing the class would work) , but I will add an option to do it only with JS , without Jquery , the explanation is inside the code. The method closest () was used to search the row and insertAdjacentHTML () to add the icon.

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>

answered by 07.10.2017 в 06:23

Record and save video with JavaScript Create a new theme for Firebase notifications from aspx.net

score 0 · Accepted Answer

I made some modifications to arrive at a possible solution:

Modified the classes of the cells that are headed so as not to treat them in the same way as the data cells
There was a typo error, "colunm" > "column"
The 4th column has a text-align center so that the icon is aligned
For each td with class column-4 the plus icon is added as a child element
For each plus icon you add an onclick listener, where you invoke a function that gets the tr closest to the icon and iterates over its td (obtained through . find () , adding its values to 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>