如何将 class 添加到动态表的元素？

Question

我有一个动态表，我需要在其中总结特定列中的值，将 id 属性附加到每一行将是实现此目的的最佳方法。 我只专注于为每个表行中的每个<td>设置和 id。 更新：我在<td>中有所有 4 个键，但我希望每个<td>都匹配该值。

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>

完成后，我希望 html 标记看起来像这样：

<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

尝试这个

tr.id("id"+i)

Answer 2

无法使用 ID 检索超过 1 个元素。 请改用 class。 要仅添加 1 个 class，您可以使用HTMLElement.className="class_name" 。 要添加更多，您可以使用HTMLElement.classList.add("class_name")

Answer 3

问题实际上是您的数据元素。 尝试做这样的事情：

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

显然用您的数据填写 arrays 。 然后在您的 js 中，您可以根据需要构建表并添加类和 id。

Answer 4

解决方案是使用表格属性来获取行，然后我能够使用它在最后一个 for 循环之外但在第一个循环内访问单元格数据：

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');