html表格行加序号,用javscript实现为表格的每一行自动加上序号

利用js自动为表格的行增加序号

.qwbm_tab{width:100%;border-collapse:collapse;border:1px solid #005892;margin:8px 0;}

.qwbm_tab td{line-height:35px;border:1px solid #005892;padding-left:4px;}

tr.tr_top td{line-height:32px;border:none;background-color:#005892;color:#fff;font-weight:bold;}

td.td_center{text-align:center;}

.ys01{background-color:#E6F0FE;}

window.onload = function(){

var oTable = document.getElementById("bbsTab");

for(var i=0;i

oTable.rows[i].cells[0].innerHTML = (i+1);

if(i%2==0) //偶数行

oTable.rows[i].className = "ys01";

}

}

行号标题总计
深山工作室
深山旅行社网站管理系统 
深山留言板 
  
  
  
好的,以下是创建 layui 表格,在最后第一行第二列新增一个新增按钮的完整代码: HTML代码: ```html <table id="demo" lay-filter="test"></table> ``` JavaScript代码: ```javascript layui.use('table', function(){ var table = layui.table; //构造表格 table.render({ elem: '#demo', height: 315, url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', minWidth:150}, {field:'sex', title:'性别'}, {field:'city', title:'城市', minWidth:100}, {field:'sign', title:'签名', minWidth:100}, {field:'experience', title:'积分', sort: true}, {field:'score', title:'评分', sort: true}, {field:'classify', title:'职业', minWidth:100}, {field:'wealth', title:'财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} //这里是操作列,我们在这里添新增按钮 ]] }); //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID:'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑:<br>'+ JSON.stringify(data)) } }); //这里是我们添的事件,当单击新增按钮时将添一行数据 $('#demo .layui-table-fixed-l .layui-table-body tbody').on('click', 'tr:last-child td[data-field="wealth"]', function() { var json = { id: Math.floor(Math.random()*10000), username: 'test'+Math.floor(Math.random()*100), email: 'test'+Math.floor(Math.random()*100)+'@example.com', sex: '男', city: '上海', sign: '', experience: Math.floor(Math.random()*100), score: Math.floor(Math.random()*100), classify: '作家', wealth: Math.floor(Math.random()*1000) }; table.append('#demo', [json]); }); }); ``` 需要注意的是,layui 表格的操作列是通过 `toolbar` 属性来添的,我们要在该属性中添一个新增按钮,可以参考代码中的示例。同时,我们还需要绑定一个单击事件,在该事件中添一行数据。可以参考示例代码中的事件绑定方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值