溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了JScript實現表格的簡單操作，供大家參考，具體內容如下
實現思路：
1、添加時：獲取當前列表的行數，在當前一行添加下一行；
2、用insertCell()方法添加一行，下標從0開始，
3、若要給新一行添加類型、響應事件，就用setAttribute（）方法，類似于鍵值對，并用appendChild（）方法將數據保存到新一行
4、刪除時：獲取需要刪除行的當前行數this，然后獲取父節點，把整一行刪掉remove（），而不是單單刪除某一行的單個數據
5、修改時：獲取當前修改行的行數索引，點擊修改時，把表格狀態轉換為文本格式，并把“修改”改為“確定”
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 400px;
}
td,th{
border-right:1px solid #ccc ;
border-bottom: 1px solid #ccc;
}
</style>
<script>
function add(){
var table = document.getElementById("order");
var index = table.rows.length;//表格行數
var row = table.insertRow(index);//插入一個行并返回新一行
var c0 = row.insertCell(0);
var b0 = document.createElement("input");
b0.setAttribute("type","checkbox");
b0.setAttribute("onclick","seclect("+index+")");
b0.setAttribute("name","sel");
c0.appendChild(b0);
var c1 = row.insertCell(1);//在新一行插入一列，并返回新一列
c1.innerHTML = prompt("請輸入商品名稱","");
var c2 = row.insertCell(2);//在新一行插入一列，并返回新一列
c2.innerHTML = prompt("輸入數量","");
var c3 = row.insertCell(3);//在新一行插入一列，并返回新一列
c3.innerHTML = prompt("輸入價格","");
var c4 = row.insertCell(4);
var b1 = document.createElement("input");
b1.setAttribute("type","button");
b1.setAttribute("value","刪除");
b1.setAttribute("onclick","del(this)");
var b2 = document.createElement("input");//創建按鈕
b2.setAttribute("type","button");
b2.setAttribute("value","修改");
b2.setAttribute("style","margin-left: 5px");
b2.setAttribute("onclick","update("+index+")");
c4.appendChild(b1);//把按鈕添加到操作的單元格中
c4.appendChild(b2);
}
function del(but){
//var table = document.getElementById("order");
but.parentNode.parentNode.remove();//根據節點的層級關系刪除行
}
function update(index){
var table = document.getElementById("order");
//獲得修改按鈕
var cell=table.rows[index].cells[4];
cell.lastChild.setAttribute("value","確定");
//為按鈕重新綁定事件
cell.lastChild.setAttribute("onclick","edit("+index+")");
//修改數量
var cellNumer = table.rows[index].cells[2];
var txt = document.createElement("input"); //創建一個文本框
txt.setAttribute("value",cellNumer.innerHTML);//設置文本框的值
txt.setAttribute("size",5);//文本框長度
cellNumer.innerHTML = "";//把單元格的數據清除
cellNumer.appendChild(txt); //把文本框加入到單元格
}
function edit(index){
var table = document.getElementById("order");
var cell = table.rows[index].cells[4];
cell.lastChild.setAttribute("value","修改");
cell.lastChild.setAttribute("onclick","update("+index+")");
//把單元格中的文本框刪除
var cellNumer = table.rows[index].cells[2];
var num = cellNumer.firstChild.value;//取文本框的值
cellNumer.removeChild(cellNumer.firstChild);//刪除文本框
cellNumer.innerHTML = num;
}
function allSelect(ch){
var item = document.getElementsByTagName("input"); //取所有的input標簽
for(var i=0;i<item.length;i++){ //循環每一個
if(item[i].type==ch.type){ //判斷每一個標簽的類型是否為CheckBox
item[i].checked = ch.checked; //復選框的選中與全選的復選框選中相同
}
}
}
function seclect(sh){
var item = document.getElementsByName("sel");
var all = document.getElementById("all");
var tag = true;
for(var i=0;i<item.length;i++){//判斷是否全部選中
if(item[i].checked == false){
tag = false;
break;
}
}
all.checked = tag;
}
</script>
</head>
<body>
<center>
<table id="order" >
<tr>
<th>
<input type="checkbox" onclick="allSelect(this)" id="all"/>全選
</th>
<th>商品名稱</th>
<th>數量</th>
<th>單價</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" onclick="seclect(this)" name="sel"/></td>
<td>娃哈哈</td>
<td>10</td>
<td>2</td>
<td><input value="刪除" type="button" onclick="del(this)"/><input value="修改" type="button" onclick="update(1)"/></td>
</tr>
</table>
<button onclick="add()">添加商品</button>
</center>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
