bootstrap如何實現(xiàn)table單元格新增行并編輯功能

這篇文章主要介紹bootstrap如何實現(xiàn)table單元格新增行并編輯功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到黃石港網(wǎng)站設(shè)計與黃石港網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋黃石港地區(qū)。

table單元格新增行并編輯，具體內(nèi)容如下

需要

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,取出當(dāng)前td中的文本內(nèi)容保存起來 
  var text=td.text(); 
  //2,清空td里面的內(nèi)容 
  td.html(""); //也可以用td.empty(); 
  //3，建立一個文本框，也就是input的元素節(jié)點 
  var input=$("<input>"); 
  //4，設(shè)置文本框的值是保存起來的文本內(nèi)容 
  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("已達到發(fā)票能開具的最大商品明細行數(shù)");
  }
} 
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  width="200">名稱</th>
   <th  width="200">值</th>
   <th  width="100">操作</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td  onclick="tdclick(this)"></td>
   <td  onclick="tdclick(this)"></td>
   <td  onclick="deletetr(this)"><button type="button" class="btn btn-xs btn-link">刪除</button></td>
  </tr>
 </tbody>
</table>

<div id="addtrdiv" >
 <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button>
</div>
</body>
</html>

效果圖：

bootstrap如何實現(xiàn)table單元格新增行并編輯功能

以上是“bootstrap如何實現(xiàn)table單元格新增行并編輯功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：bootstrap如何實現(xiàn)table單元格新增行并編輯功能
URL網(wǎng)址：http://www.jbt999.com/article14/jisgge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、外貿(mào)建站、全網(wǎng)營銷推廣、網(wǎng)站制作、App開發(fā)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容