溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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 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如何實現table單元格新增行并編輯功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
