本文介绍如何使用Bootstrap Table插件在网页表格中动态显示行号。通过简单的HTML结构结合JavaScript配置，实现美观且实用的行号功能。
bootstrap-table显示行号
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8">
<title>bootstrap-table显示行号</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered" id="gravidaTable">
<thead>
<tr>
<th ></th>
<th >栏目标识</th>
<th>栏目名称</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
$('#gravidaTable').bootstrapTable({
columns: [{
title: '行号',
align: 'center',
valign: 'bottom',
formatter: function(value, row, index) {
return index + 1;
}
}
]
});
</script>
</body>
</html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8">
<title>bootstrap-table显示行号</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered" id="gravidaTable">
<thead>
<tr>
<th ></th>
<th >栏目标识</th>
<th>栏目名称</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
<tr>
<td ></td>
<td >cs</td>
<td>测试11111</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
$('#gravidaTable').bootstrapTable({
columns: [{
title: '行号',
align: 'center',
valign: 'bottom',
formatter: function(value, row, index) {
return index + 1;
}
}
]
});
</script>
</body>
</html>
通过bootstrap-table这个插件可以通过页面和js做到动态显示表格行号的效果，上面js代码里columns是页面加载的时候重新设置了表格的内容属性。默认从第一列开始设置。
官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation
通过这个文档可以查阅其他属性的设置
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
