脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap table新增行并编辑

bootstrap table单元格新增行并编辑

 更新时间：2017年05月19日 10:24:03   作者：广信_刘东君  
这篇文章主要为大家详细介绍了bootstrap table单元格新增行并编辑的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

需要

bootstrap.min.css —— [ Bootstrap ]

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

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新建HTML</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript"> 
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"); 
}
var row=0; 
function addtr(){ 
  if(row<8){
  row++;
  var table = $("#para_table"); 
  var tr= $("<tr>" + 
    "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + 
    "<td style='text-align: center;' 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); 
  }else{
    alert("已达到发票能开具的最大商品明细行数");
  }
} 
function deletetr(tdobject){
  row--;
  var td=$(tdobject); 
  td.parents("tr").remove(); 
}


</script>
<link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
</head>
<body>
<table class="table table-bordered" id="para_table">
 <thead>
  <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>
 </thead>
 <tbody>
  <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>
 </tbody>
</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>
</body>
</html>

效果图：

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

您可能感兴趣的文章:

相关文章

  • sessionStorage存储时多窗口之前能否进行状态共享解析

    sessionStorage存储时多窗口之前能否进行状态共享解析

    这篇文章主要为大家介绍了sessionStorage存储时多窗口之前能否进行状态共享解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • JS highcharts动态柱状图原理及实现

    JS highcharts动态柱状图原理及实现

    这篇文章主要介绍了JS highcharts动态柱状图原理及实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • JS检索下拉列表框中被选项目的索引号(selectedIndex)

    JS检索下拉列表框中被选项目的索引号(selectedIndex)

    这篇文章主要介绍了JS检索下拉列表框中被选项目的索引号(selectedIndex),本文通过实例代码图文详解的形式给大家介绍的非常详细，需要的朋友可以参考下
    2019-12-12
  • Javascript中常用类型的格式化方法小结

    Javascript中常用类型的格式化方法小结

    这篇文章主要给大家介绍了Javascript中常用类型的格式化方法，其中包括格式化浮点数、格式化有符号整数(int32)、格式化无符号整数(uint32)、格式化布尔值以及格式化字符串等，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 最常见和最有用的字符串相关的方法详解

    最常见和最有用的字符串相关的方法详解

    本文主要介绍了最常见和最有用的字符串相关的方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • Document和Document.all区别分析

    Document和Document.all区别分析

    all是一个集合，包含所有html对像的集合，写一个程式，可以存取到所有的对像。
    2008-11-11
  • Javascript中字符串相关常用的使用方法总结

    Javascript中字符串相关常用的使用方法总结

    本篇文章主要介绍了Javascript中字符串相关常用的使用方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS 实现完美include载入实现代码

    JS 实现完美include载入实现代码

    在写这个之前在网上搜索了些资料，发现以前写的include都存在2个问题，这也是include需要解决的比较重要的2个问题。
    2010-08-08
  • Javascript6中字符串的四个新用法分享

    Javascript6中字符串的四个新用法分享

    本文将要介绍在JavaScript 6(ES6)里出现的一个关于字符串操作的语法特征，有需要的朋友们可以参考学习，下面来一起来看看吧。
    2016-09-09
  • JS实现关闭小广告特效

    JS实现关闭小广告特效

    这篇文章主要为大家详细介绍了JS实现关闭小广告特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12

最新评论