CODEWITHSUNDEEP
javascriptjqueryhtml
PlayHardGoPro
PlayHardGoPro

Reputation: 2933

Dynamically remove tableDatas from table

Update Code working Here

I have a table populated with teacher's disciplines that has: day of the week and it's time period, of course it also have the disciplines.
Now I need to remove those items.

Table: 

<table id="prof-table">
    <tbody><tr>
        <th>HORÁRIO</th>
        <th data-dia="mon">Monday</th>
        <th data-dia="tue">Tuesday</th>
        <th data-dia="wed">Wednesday</th>
        <th data-dia="thu">Thursday</th>
        <th data-dia="fri">Friday</th>                  
    </tr>
    <tr>
        <td>08:30 ~ 10:30</td>
        <td><ol><li data-id="6" data-prof="4">Calculo A</li></ol></td>
    </tr>
    <tr>
        <td>10:30 ~ 12:30</td>
        td></td><td><ol><li data-id="2" data-prof="4">Lab II</li></ol></td>
    </tr>
    <tr>
        <td>14:30 ~ 16:30</td>
    </tr>
    <tr>
        <td>16:30 ~ 18:30</td>
    </tr>
    <tr>
        <td>18:30 ~ 20:30</td>
       <td></td><td></td><td></td><td></td><td><ol><li data-id="5" data-prof="4">Estatistica</li></ol></td>
    </tr>
    <tr>
        <td>20:30 ~ 21:30</td>
    </tr>
    <tr>
        <td>21:30 ~ 23:30</td>
    </tr>
</tbody></table>

What I did so far is to get the <td> from the rows but I don't know how to work with it, tried to use .each() from JQuery but I just cant do it.

Javascript: 

var myRow = document.getElementById("prof-table").rows[range.index + 1];
var test = $(myRow.getElementsByTagName('td')).not(':first-child');//Skip the first td because its the time period of the discipline.
console.log(teste);

Now if you check the console.log() this is what is shown:
As you can see, there are three lines. Each line/obj has the exactly number of <td>s from the row.
What I need to do is loop through each of these lines. Also I need to reset the index for each loop.
EX: While interacting with the first line of the image, my Index goes from 0 ~ 1. Then when start the second line I need to start my index from 0 again untill 4 (because it has 5 elements td)

console.log()

Tried something like: 

$.each(teste, function(index, obj){
    if($(obj).text() == "")
       myRow.deleteCells(index);                            
});

But as the index doesnt "reset" for each of those lines in the picture, I get error about overflowing the row index limite. Because while the first row has only one <td> member, the last has 5, as the index is always growing ++ I get that error. And I have no idea how to work around it.

Upvotes: 0

Views: 55

Answers (1)

Hoang Nam
Hoang Nam

Reputation: 101

Because I don't understand you situation well, I create two function

  1. To delete data based on "data-prof" attribute of "li" inside the "td"

  2. To delete all data of the table.

In my oppinion, if you assign "data-prof" value to the "td" instead of "li", it'll boost performance.

Hope it's help.

Function to delete data based on "data-prof" attribute:

    function resetTableData(dataProf) {
        // Get cell list by data-prof
        var $cellList = $("#prof-table").find("li[data-prof = " + dataProf + "]").closest("td");

        $cellList.each(function(){
            $(this).html(""); //Remove inner HTML of cells.
        });
    }

Function to delete data of all cells:

function resetTableData() {
    // Get row list
    var $rowList = $("#prof-table").find("tr").not(":first"); // First row is the header, don't need to select.

    // Loop row list and get cell list of each
    $rowList.each(function(){
        // Cell list
        var $cellList = $(this).find("td").not(":first"); // First column is time period, don't delete it.

        // Loop cell list and delete content
        $cellList.each( function() {
            $(this).html(""); //Remove inner HTML of cells.
        });
    });
}

Upvotes: 1

Related Questions