CODEWITHSUNDEEP
javascripthtmltwitter-bootstraphtml-table
Coleen
Coleen

Reputation: 124

Accessing <td> in HTML Table Using JavaScript

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 )

Upvotes: 0

Views: 1712

Answers (1)

nurdyguy
nurdyguy

Reputation: 2945

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.

Upvotes: 2

Related Questions