最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小OO 时间:2020-11-27 22:28:53
文档

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>;<;<。
推荐度:
导读本文实例为大家分享了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>;<;<。

本文实例为大家分享了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+"\"},"; 
 } 
 } 
 tabledata = "["+tabledata+"]"; 
 return tabledata; 
} 
 
function tdclick(tdobject){ 
 var td=$(tdobject); 
 td.attr("onclick", ""); 
 //1,取出当前td中的文本内容保存起来 
 var text=td.text(); 
 //2,清空td里面的内容 
 td.html(""); //也可以用td.empty(); 
 //3,建立一个文本框,也就是input的元素节点 
 var input=$("<input>"); 
 //4,设置文本框的值是保存起来的文本内容 
 input.attr("value",text); 
 input.bind("blur",function(){ 
 var inputnode=$(this); 
 var inputtext=inputnode.val(); 
 var tdNode=inputnode.parent(); 
 tdNode.html(inputtext); 
 tdNode.click(tdclick); 
 td.attr("onclick", "tdclick(this)"); 
 }); 
 input.keyup(function(event){ 
 var myEvent =event||window.event; 
 var kcode=myEvent.keyCode; 
 if(kcode==13){ 
 var inputnode=$(this); 
 var inputtext=inputnode.val(); 
 var tdNode=inputnode.parent(); 
 tdNode.html(inputtext); 
 tdNode.click(tdclick); 
 } 
 }); 
 
 //5,将文本框加入到td中 
 td.append(input); 
 var t =input.val(); 
 input.val("").focus().val(t); 
// input.focus(); 
 
 //6,清除点击事件 
 td.unbind("click"); 
} 
function addtr(){ 
 var table = $("#para_table"); 
 var tr= $("<tr>" + 
 "<td onclick='tdclick(this)'>"+"</td>" + 
 "<td onclick='tdclick(this)'>"+"</td>" + 
 "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link' >"+"删除"+"</button></td></tr>"); 
 table.append(tr); 
} 
function deletetr(tdobject){ 
 var td=$(tdobject); 
 td.parents("tr").remove(); 
} 

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

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>;<;<。
推荐度:
标签: 添加 tab 删除行
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top