使用 HTML 设置动态表中每一行的格式

Question

im 使用下一个函数在 HTML 表单中创建动态表：

<script>
    function poblarTabla() {
        // CREATE DYNAMIC TABLE.
        var table = document.createElement('table');
        // SET THE TABLE ID. 
        // WE WOULD NEED THE ID TO TRAVERSE AND EXTRACT DATA FROM THE TABLE.
        table.setAttribute('id', 'tablaDeCuentas');
        var arrHead = new Array();
        arrHead = ['Emp. ID', 'Emp.Name', 'Designation'];
        var arrValue = new Array();
        arrValue.push(['1', 'Green Field', 'Accountant']);
        arrValue.push(['2', 'Arun Banik', 'Project Manager']);
        arrValue.push(['3', 'Dewane Paul', 'Programmer']);
        var tr = table.insertRow(-1);
        for (var h = 0; h < arrHead.length; h++) {
            var th = document.createElement('th');              // TABLE HEADER.
            th.innerHTML = arrHead[h];
            tr.appendChild(th);
        }
        for (var c = 0; c <= arrValue.length - 1; c++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < arrHead.length; j++) {
                var td = document.createElement('td');          // TABLE DEFINITION.
                td = tr.insertCell(-1);
                td.innerHTML = arrValue[c][j];                  // ADD VALUES TO EACH CELL.
            }
        }

        document.body.appendChild(table);
    }
</script>

这工作正常，我现在要做的是使用以下格式格式化每一行：

<tr align="left" valign="middle"><td bgcolor="#005C84" width="240" height="30"> <p style="color: white; font-size: 14px;font-family: Arial,sans-serif;font-weight: normal;text-decoration: none; display:block; padding:0; margin:0; margin-left:10px">ID de cuenta:</p></td><td bgcolor="#e5f0c3"><p style="color: #666; font-size: 14px;font-family: Arial,sans-serif;font-weight: normal;text-decoration: none; display:block; padding:0; margin:0; margin-left:10px"></p></td></tr>

因此，每次创建行时，都会以这种格式显示在表单中。安姬能帮我一把吗？提前感谢！

Answer 1

您可以尝试创建类，然后在创建表或其行时根据需要添加类，而不是使用内联样式。

风格.css

.table-style{
    align: left;
    valign: middle;
}

然后在你的JavaScript中：

table.classList.add('table-style');