How do I add a class to a dynamic table's <td> element?

Question

I have a dynamic table, where I need to sum up the values in a particular column, attaching an id property to each row would be the best way to achieve this. I'm only focused on setting and id for each <td> in every table row. UPDATE: I have all 4 keys in the <td> but I would like each <td> to match what the value is.

JavaScript:

var prodArr = [];
data = [{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}];   

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        row.setAttribute('id', Object.values(obj)[0]);
        //redo this id stuff to maintain insert integrity for each column in the row.
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
            col.setAttribute('class', Object.keys(obj));
        }
        var targetCell = row.getElementsByTagName("td");
        targetCell[0].setAttribute('class', 'txtSku');
        targetCell[1].setAttribute('class', 'txtRetailPrice');
        targetCell[2].setAttribute('class', 'txtListPrice');
        targetCell[3].setAttribute('class', 'txtProductName');
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        //input.setAttribute('')
        row.appendChild(input);
        table.appendChild(row);
    }
}
buildTable(data);

HTML:

<table id="table">
                 
                 <tr>
                    <th><label>SKU:</label></th>
                    <th><label>Retail Price:</label></th>
                    <th><label>List Price</label></th>
                    <th><label>Product Name</label></th>
                    <th><label>Quantity</label></th>
                 </tr>

                 <tfoot>
                    <th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal">
                       <input type="button" value= "Add" id = "addTotals"> 
                    </th>
                 </tfoot>
</table>

When complete I would like the html markup to look like this:

<table id="table">
                 
    <tr>
        <td><input type="text" name="txtCustomerName" id = "txtCustomerName"></td>
        <td><input type="text" name="txtPhone" id = "txtPhone"></td>
        <td><input type="text" name="txtEmail" id= "txtEmail"></td>
        <td><input type="text" name="txtRopo" id= "txtRopo"></td>
        <td><input type="text" name="txtAddress" id= "txtAddress"></td>
    </tr>
    <tr>
        <th><label>SKU:</label></th>
        <th><label>Retail Price:</label></th>
        <th><label>List Price</label></th>
        <th><label>Product Name</label></th>
        <th><label>Quantity</label></th>
    </tr>
    <tr>
        <td id="SKU">9372983-382L</td>
        <td id="retailPrice">11.75</td>
        <td id="listPrice">3.50</td>
        <td id="prodName">Tennis balls</td>
        <td id="quantity">1</td>
    </tr>
    <tfoot>
    <th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal">
        <input type="button" value= "Add" id = "addTotals"> 
    </th>
    </tfoot>
</table>

https://codepen.io/Postman507/pen/mdrKZoY

Answer 1

try this

tr.id("id"+i)

Answer 2

It will not be possible to retrieve more than 1 element using ID. Use a class instead. To add just 1 class, you can use HTMLElement.className="class_name" . To add more, you can use HTMLElement.classList.add("class_name")

Answer 3

the problem is really your data element. Try to do something like this:

data= {row1:{names:[],ids:[]},
       row2:{labels:[]},
       row3:{ids[]}}

obviously filling in the arrays with your data. Then in your js you can build your table and add classes and id's as needed.

Answer 4

The solution was using the tables properties to get the rows, then I was able to access the cell data using this outside of the last for loop but inside the first:

var targetCell = row.getElementsByTagName("td");
targetCell[0].setAttribute('class', 'txtSku');
targetCell[1].setAttribute('class', 'txtRetailPrice');
targetCell[2].setAttribute('class', 'txtListPrice');
targetCell[3].setAttribute('class', 'txtProductName');