bootstraptable实现双击可编辑、添加、删除行功能_Bootstrap5增减行 - CSDN文库

1星 20 浏览量更新于2023-05-04 评论收藏 34KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

bootstrap table实现双击可编辑、添加、删除行功能实现双击可编辑、添加、删除行功能

本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下

html：

<table class="table table-bordered" id="para_table">

<tr>

<th style="text-align:center" width="200">名称</th>

<th style="text-align:center" width="200">值</th>

<th style="text-align:center" width="100">操作</th>

</tr>

<tr>

<td style="text-align:center; " onclick="tdclick(this)"></td>

<td style="text-align:center; " onclick="tdclick(this)"></td>

<td style="text-align:center; " onclick="deletetr(this)">

<button type="button" class="btn btn-xs btn-link">删除</button>

</td>

</tr>

</table>

<div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">

<button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>

</div>

js：

function save_para_table(){

var tableinfo = gettableinfo();

alert(tableinfo);

}

//get table infomation

function gettableinfo(){

var key = "";

var value = "";

var tabledata = "";

var table = $("#para_table");

var tbody = table.children();

var trs = tbody.children();

for(var i=1;i<trs.length;i++){

var tds = trs.eq(i).children();

for(var j=0;j<tds.length;j++){

if(j==0){

if(tds.eq(j).text()==null||tds.eq(j).text()==""){

return null;

}

key = "key\":\""+tds.eq(j).text();

}

if(j==1){

if(tds.eq(j).text()==null||tds.eq(j).text()==""){

return null;

}

value = "value\":\""+tds.eq(j).text();

}

}

if(i==trs.length-1){

tabledata += "{\""+key+"\",\""+value+"\"}";

}else{

tabledata += "{\""+key+"\",\""+value+"\"},";

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论1

bugup

2022-07-17

不是实例，不要上当

weixin_38500047

粉丝: 9
资源: 979

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈