提问人:glatorre 提问时间:3/5/2018 更新时间:3/5/2018 访问量:821
使用 javascript 格式化动态表中的每一行 - HTML
Format each row in a dynamic table using javascript - HTML
问:
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>
因此,每次创建行时,都会以这种格式显示在表单中。anyome 可以帮我一把吗?提前Thnks!
答:
0赞
Shubham Sharma
3/5/2018
#1
您可以尝试创建类,然后在创建表或其行时根据需要添加类,而不是使用内联样式。
样式.css
.table-style{
align: left;
valign: middle;
}
然后在 JavaScript 中:
table.classList.add('table-style');
评论
0赞
glatorre
3/5/2018
我也可以将此方法classList.add与tr和td elemets一起使用吗?
0赞
Shubham Sharma
3/6/2018
是的,你可以这样做,而且,它会导致你所有的 tr 元素具有相同的样式,并且所有 td 都具有相同的样式。
上一个:使用 java 解析 XHTML
评论
css