使用javascript-HTML格式化动态表中的每一行

时间:2018-03-05 15:05:56

标签: javascript html dom html-table xhtml

使用下一个函数创建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>

因此,每次创建一行时,都会以此格式显示在表单中。任何人都可以帮我一把吗?事先提前!

1 个答案:

答案 0 :(得分:0)

您可以尝试创建类,然后在创建表或其行时添加它们,而不是使用内联样式。

的style.css

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

然后在你的javascript:

! Unbound value identifier: separate