我有一个HTML表格,有5列。第一列是“行号”,我想显示它是哪一行 - 从1开始。
我试过使用这个CSS:
body {
/* Set the Serial counter to 0 */
counter-reset: Serial;
}
table {
border-collapse: separate;
}
tr td:first-child:before {
/* Increment the Serial counter */
counter-increment: Serial;
/* Display the counter */
content: "Serial is: " counter(Serial);
}
这是以下的工作代码:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
var index = document.getElementById("myTable").rows.length;
var new_row = '<td>'+index+'</td><td>cell 1</td><td>cell 2</td>';
document.getElementById("myTable").insertRow(-1).innerHTML = new_row;
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
` <td>0</td>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
如果没有你如何做的代码,很难说。我假设行在集合中,因为你有一个add-function。你不能只使用索引+1吗?
如果add函数只是添加了原始html,你可以获取table元素并计算子元素(或使用最后一个子元素)并从中计算你的数字。
随着你提供的小信息,我可以说。
您可以再次使用通过css的下一个选项:注意:class =“css-serial”
<table class="css-serial">
<thead>
<tr>
<th>#</th>
<th>1st Column</th>
<th>2nd Column</th>
</tr>
</thead>
<tbody>
<tr>
<td></td> <!--intentionally left blank-->
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td> <!--intentionally left blank-->
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td></td> <!--intentionally left blank-->
<td>Column 1</td>
<td>Column 2</td>
</tr>
</tbody>
</table>
并添加下一个样式:
<style>
/*adding row numbers through css*/
.css-serial {
counter-reset: serial-number; /* Set the serial number counter to 0 */
}
.css-serial td:first-child:before {
counter-increment: serial-number; /* Increment the serial number counter */
content: counter(serial-number); /* Display the counter */
}
</style>