Accessing <td> in HTML Table Using JavaScript

Question

I am trying to attach a row to an editable table using data from an array. In order to do this, I'm adding a row, then utilizing a save feature in order to manipulate the s of the row. My HTML table is:

<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Being that the array data will be entered into the most recently added row, I've just accessed that using the code below, however now I am struggling to access the actual cells. My current code is:

function UpSave(rowData) {
    var tblData = document.getElementById("tblData");
    var lastRow = tblData.rows[tblData.rows.length - 1 ];
    var tdDate = lastRow.children("td:nth-child(1)"); 
    var tdTime = lastRow.children("td:nth-child(2)"); 
    var tdTreatmentNum = lastRow.children("td:nth-child(3)"); 
    var tdCellNum = lastRow.children("td:nth-child(4)");
    console.log(par); 
    var tdWasteContNum = lastRow.children("td:nth-child(5)");
    var tdButtons = lastRow.children("td:nth-child(6)");

    tdDate.html(tdDate.children(data[rowData][0])); 
    tdTime.html(tdTime.children(data[rowData][1]));
    tdTreatmentNum.html(tdTreatmentNum.children(data[rowData][2]));
    tdCellNum.html(tdCellNum.children(data[rowData][3]));
    tdWasteContNum.html(tdWasteContNum.children(data[rowData][4]));
    tdButtons.html("<img src='trash.png' class='btnDelete'><img src='pencil.png' class='btnEdit'><img src='up.png' class='btnUp'><img src='down.png' class='btnDown'>"); 
};

but the .children at the end of the variables are not valid. Any ideas on what to have instead in order to access those cells in the row?

(data is the array containing the text I'm putting into the )

Where is tblData defined? Is there a getElementById('tblData') not shown? — nurdyguy
– nurdyguy, Commented Jul 30, 2015 at 16:40

nurdyguy · Accepted Answer · 2015-07-30 18:15:24Z

2

It looks like you never clearly defined the variable tblData by leaving out quotations when you do your original getElementById. ~~Add this to~~ Replace the first line in the function:

    var tblData = document.getElementById("tblData");

Adding the quotations will bind the table in the DOM to the variable, then you can do the rest of the stuff.

Revised answer using jQuery:

    var $tblData = $("#tblData");
    var $lastRow = $tblData.find('tr').last();
    var $tdDate =  $lastRow.find('td').eq(1); 
    var $tdTime =  $lastRow.find('td').eq(2);
    var $tdTreatmentNum = $lastRow.find('td').eq(3);
    var $tdCellNum = $lastRow.find('td').eq(4);
    //console.log(par); 
    var $tdWasteContNum = $lastRow.find('td').eq(5);
    var $tdButtons = $lastRow.find('td').eq(6);


    $tdDate.html(data[rowData][0]); 
    $tdTime.html(data[rowData][1]);
    $tdTreatmentNum.html(data[rowData][2]);
    $tdCellNum.html(data[rowData][3]);
    $tdWasteContNum.html(data[rowData][4]);
    $tdButtons.html("<img src='trash.png' class='btnDelete'/><img src='pencil.png' class='btnEdit'/><img src='up.png' class='btnUp'/><img src='down.png' class='btnDown'/>");

But, if you still want to use pure javascript, try changing the

   .children("td:nth-child(x)");

to

    .childNodes[x];

Edit note: I changed the inside of the .html(...) function calls so just use the array directly. Previously I had just copy/pasted the OP code for that portion.

edited Jul 30, 2015 at 18:15

answered Jul 30, 2015 at 16:52

nurdyguy

2,9433 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Coleen Over a year ago

I added that, but the children function is still invalid

nurdyguy Over a year ago

Do you have the option of using jQuery here? If so this becomes much MUCH simpler.

Coleen Over a year ago

I can, as long as it maintains the overall design (adding the row to the table but in such a way that it doesn't obstruct the function of the editable table)

nurdyguy Over a year ago

I update my answer using jQuery. If you are only updating each cell once then there is no need to declare a variable first and then use .html() function, you can do them all at once. Also, this could probably be compressed into a simple for loop for cells 1-5, just adjusting the indexes to match.

nurdyguy Over a year ago

But, if you do want to use pure javascript, try .childNodes instead of the .children.

|

Collectives™ on Stack Overflow

Accessing <td> in HTML Table Using JavaScript

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related