当前位置：Gxlcms > JavaScript > bootstrap table单元格新增行并编辑

bootstrap table单元格新增行并编辑

时间：2021-07-01 10:21:17 帮助过：6人阅读

table单元格新增行并编辑，具体内容如下

需要

bootstrap.min.css —— [ Bootstrap ]

jquery-1.8.2.min.js —— [ Jquery ]

代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>新建HTML</title>
  5. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  6. <script type="text/javascript"> 
  7. function save_para_table(){ 
  8.   var tableinfo = gettableinfo(); 
  9.   alert(tableinfo); 
  10. } 
  11. //get table infomation 
  12. function gettableinfo(){ 
  13.   var key = ""; 
  14.   var value = ""; 
  15.   var tabledata = ""; 
  16.   var table = $("#para_table"); 
  17.   var tbody = table.children(); 
  18.   var trs = tbody.children(); 
  19.   for(var i=1;i<trs.length;i++){ 
  20.     var tds = trs.eq(i).children(); 
  21.     for(var j=0;j<tds.length;j++){ 
  22.       if(j==0){ 
  23.         if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
  24.           return null; 
  25.         } 
  26.         key = "key\":\""+tds.eq(j).text(); 
  27.       } 
  28.       if(j==1){ 
  29.         if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
  30.           return null; 
  31.         } 
  32.         value = "value\":\""+tds.eq(j).text(); 
  33.       } 
  34.     } 
  35.     if(i==trs.length-1){ 
  36.       tabledata += "{\""+key+"\",\""+value+"\"}"; 
  37.     }else{ 
  38.       tabledata += "{\""+key+"\",\""+value+"\"},"; 
  39.     } 
  40.   } 
  41.   tabledata = "["+tabledata+"]"; 
  42.   return tabledata; 
  43. } 
  44. function tdclick(tdobject){ 
  45.   var td=$(tdobject); 
  46.   td.attr("onclick", ""); 
  47.   //1,取出当前td中的文本内容保存起来 
  48.   var text=td.text(); 
  49.   //2,清空td里面的内容 
  50.   td.html(""); //也可以用td.empty(); 
  51.   //3，建立一个文本框，也就是input的元素节点 
  52.   var input=$("<input>"); 
  53.   //4，设置文本框的值是保存起来的文本内容 
  54.   input.attr("value",text); 
  55.   input.bind("blur",function(){ 
  56.     var inputnode=$(this); 
  57.     var inputtext=inputnode.val(); 
  58.     var tdNode=inputnode.parent(); 
  59.     tdNode.html(inputtext); 
  60.     tdNode.click(tdclick); 
  61.     td.attr("onclick", "tdclick(this)"); 
  62.   }); 
  63.   input.keyup(function(event){ 
  64.     var myEvent =event||window.event; 
  65.     var kcode=myEvent.keyCode; 
  66.     if(kcode==13){ 
  67.       var inputnode=$(this); 
  68.       var inputtext=inputnode.val(); 
  69.       var tdNode=inputnode.parent(); 
  70.       tdNode.html(inputtext); 
  71.       tdNode.click(tdclick); 
  72.     } 
  73.   }); 
  74.   //5，将文本框加入到td中 
  75.   td.append(input); 
  76.   var t =input.val(); 
  77.   input.val("").focus().val(t); 
  78. //       input.focus(); 
  79.   //6,清除点击事件 
  80.   td.unbind("click"); 
  81. }
  82. var row=0; 
  83. function addtr(){ 
  84.   if(row<8){
  85.   row++;
  86.   var table = $("#para_table"); 
  87.   var tr= $("<tr>" + 
  88.     "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + 
  89.     "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + 
  90.     "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link' >"+"删除"+"</button></td></tr>"); 
  91.   table.append(tr); 
  92.   }else{
  93.     alert("已达到发票能开具的最大商品明细行数");
  94.   }
  95. } 
  96. function deletetr(tdobject){
  97.   row--;
  98.   var td=$(tdobject); 
  99.   td.parents("tr").remove(); 
  100. }
  101. </script>
  102. <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
  103. </head>
  104. <body>
  105. <table class="table table-bordered" id="para_table">
  106.  <thead>
  107.   <tr>
  108.    <th style="text-align:center" width="200">名称</th>
  109.    <th style="text-align:center" width="200">值</th>
  110.    <th style="text-align:center" width="100">操作</th>
  111.   </tr>
  112.  </thead>
  113.  <tbody>
  114.   <tr>
  115.    <td style="text-align:center; " onclick="tdclick(this)"></td>
  116.    <td style="text-align:center; " onclick="tdclick(this)"></td>
  117.    <td style="text-align:center; " onclick="deletetr(this)"><button type="button" class="btn btn-xs btn-link">删除</button></td>
  118.   </tr>
  119.  </tbody>
  120. </table>
  121. <div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">
  122.  <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>
  123. </div>
  124. </body>
  125. </html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！