我有以下动态表:
dtable = "<table style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>";
dtable += "<td style='width: 100px; text-align: right;'>" + Data["name"] + "</td></tr>";
dtable += "<tr><td style='width: 100px; text-align: right;'></td>";
dtable += "<td style='width: 100px; text-align: right;'></td></tr>";
dtable += "<tr><td style='width: 100px; color: red;'> Status </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>";
dtable += "<td style='width: 100px; text-align: right;'>" + Data["ID"] + "</td></tr>";
dtable += "<tr><td style='width: 100px; text-align: right;'></td>";
dtable += "<td style='width: 100px; text-align: right;'></td></tr>";
dtable += "<tr><td style='width: 100px; color: red;'> Title</td>";
显示将分为两列，其中第一列包含 Start 和 Name 作为列 第二列包含状态和ID。
我想在第一列和第二列之间添加边框。
我不能使用任何其他函数(如 jQuery)来计算和放置左右列的边框，因为这只是一个动态内容。
上表是否有任何更改以对它们进行分组和加边框？
我基本上是单击一个按钮，然后单击构建此表并显示。
编辑:dtable 错别字
最佳答案
这对我有用。交替使用边框颜色和背景颜色。
<html>
<script>
function init(){
var Data= {name:'bin', ID:7, status:'good', start:'today'}
dtable = "<table class='TFtableCol' style='background-color:purple;'><tr><td style='width: 100px; color: red;'> Start </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> Name </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["start"] + "</td>";
dtable += "<td style='width: 100px; text-align: right;'>" + Data["name"] + "</td></tr>";
dtable += "<tr><td style='width: 100px; text-align: right;'></td>";
dtable += "<td style='width: 100px; text-align: right;'></td></tr>";
dtable += "<tr><td style='width: 100px; color: red;'> Status </td>";
dtable += "<td style='width: 100px; color: red; text-align: right;'> ID </td></tr>";
dtable += "<tr><td style='width: 100px;'>" + Data["status"] + "</td>";
dtable += "<td style='width: 100px; text-align: right;'>" + Data["ID"] + "</td></tr>";
dtable += "<tr><td style='width: 100px; text-align: right;'></td>";
dtable += "<td style='width: 100px; text-align: right;'></td></tr>";
dtable +="</table>"
//dtable += "<tr><td style='width: 100px; color: red;'> Title</td>";
document.getElementById("d").innerHTML = dtable;
}
</script>
<body onload='init()'>
<style type="text/css">
.TFtableCol{
width:100%;
border-collapse:collapse;
}
.TFtableCol td{
padding:7px; border:2px solid;
}
/* improve visual readability for IE8 and below */
.TFtableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.TFtableCol tr td:nth-child(odd){
background: #b8d1f3;
border-color:Red;
}
/* Define the background color for all the EVEN table columns */
.TFtableCol tr td:nth-child(even){
background: #dae5f4;
border-color:green;
}
</style>
<form>
<div id='d' style='width:600px'></div>
</form>
</body>
</html>
关于javascript - 在 JavaScript 中格式化动态表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34183857/