js操作表格
這次帶給大家js操作表格，js操作表格的注意事項有哪些，以下就是實戰案例，一起來看一下。
實作想法：
#
1.新增時：取得目前清單的行數，在目前一行新增下一行；
2、用insertCell()方法新增一行，下標從0開始，
3、若要為新一行新增類型、回應事件，就用setAttribute（）方法，類似鍵值對，並用appendChild（）方法將資料儲存到新一行
4、刪除時：取得需要刪除行的目前行數this，然後取得父節點，把整一行刪掉remove（），而不是單單刪除某一行的單一資料
5、修改時：取得目前修改行的行數索引，點選修改時，把表格狀態轉換為文字格式，並把「修改」改為「確定」
實作程式碼：
<!DOCTYPE html>
<html>
<head>
<metacharset="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){
varitem=document.getElementsByName("sel");
varall=document.getElementById("all");
vartag=true;
for(vari=0;i<item.length;i++){//判断是否全部选中
if(item[i].checked == false){
tag=false;
break;
}
}
all.checked=tag;
}
</script>
</head>
<body>
<center>
<tableid="order">
<tr>
<th>
<inputtype="checkbox"onclick="allSelect(this)"id="all"/>全选
</th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td><inputtype="checkbox"onclick="seclect(this)"name="sel"/></td>
<td>娃哈哈</td>
<td>10</td>
<td>2</td>
<td><inputvalue="删除"type="button"onclick="del(this)"style="margin-right:5px ;"/><inputvalue="修改"type="button"onclick="update(1)"/></td>
</tr>
</table>
<buttononclick="add()">添加商品</button>
</center>
</body>
</html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是js操作表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
PPT表格中插入的圖片調整格式的操作步驟
Mar 26, 2024 pm 04:16 PM
1.新建一個PPT文件，命名為【PPT技巧】，作為範例。 2、雙擊【PPT技巧】，開啟PPT檔。 3、插入兩行兩列的表格，作為範例。 4.在表格的邊框上雙擊，上方工具列出現【設計】的選項。 5.點選【底紋】的選項，點選【圖】。 6.點選【圖片】，彈出以圖片為背景的填滿選項對話框。 7.在目錄中找到要插入的托，點選確定即可插入圖片。 8.在表格框上右鍵，彈出設定的對話框。 9.點選【設定儲存格格式】，勾選【將圖片平鋪為底紋】。 10.設定【居中】【鏡像】等自己需要的功能，點選確定即可。注意：預設為圖片填充在表格
關於銷售預測如何製作表格
Mar 20, 2024 pm 03:06 PM
能夠熟練的製作表格不僅是會計、人事以及財務的必備技能，對於許多銷售人員來說，學會製作表格也是很重要的。因為與銷售量有關的數據都是很多且很複雜的，而且不是簡單的記在文件當中，就可以說明問題的。為了能讓更多的銷售人員熟練運用Excel來製作表格，小編接下來要介紹的就是有關於銷量預測的表格製作問題，有需要的朋友不要錯過哦！ 1，開啟【銷售預測及目標制定】，xlsm，來分析每個表格所存放的資料。 2，新建【空白工作表】，選擇【儲存格】，輸入【標籤資訊】。向下【拖曳】，【填充】月份。輸入【其它】數據，點選【
wps數值如何設定依條件自動變色_wps表格數值設定依條件自動變色的步驟
Mar 27, 2024 pm 07:30 PM
1.開啟工作表，找到【開始】-【條件格式】按鈕。 2、點選列選擇，選取將新增條件格式的列。 3.點選【條件格式】按鈕，彈出選項選單國。 4.選擇【突出顯示條件規則】-【介於】。 5、填寫規則：20，24，深填色深綠色文字。 6.確定後，所選列中資料依設定對對應數字文字、單元框加色處理。 7.對於沒有衝突的條件規則，可以重複添加，但對於衝突規則wps則會以最後添加的規則代替先前建立的條件規則。 8.重複新增【介於】規則20-24和【小於】20後的單元列。 9.如需改變規則，剛可以清除規則後重新設定規則。
PyCharm使用教學：詳細指引你執行操作
Feb 26, 2024 pm 05:51 PM
PyCharm是一款非常受歡迎的Python整合開發環境（IDE），它提供了豐富的功能和工具，使得Python開發變得更有效率和便利。本文將為大家介紹PyCharm的基本操作方法，並提供具體的程式碼範例，幫助讀者快速入門並熟練操作工具。 1.下載安裝PyCharm首先，我們需要前往PyCharm官網（https://www.jetbrains.com/pyc
你知道Word表格怎麼求和嗎
Mar 21, 2024 pm 01:10 PM
有時候，我們在Word表格中會經常遇到計數的問題；通常遇到這樣的問題，大部分同學都回把Word表格複製到Excel中來計算；還有一部分同學會默默地拿起計算器去算。那有沒有快速的方法來計算呢？當然有啊，其實在Word中也是可以計算求和的。那麼，你知道該怎麼操作嗎？今天，我們就來一起來看吧！廢話不多說，有需要的朋友趕緊收藏起來吧！步驟詳情：1、首先，我們開啟電腦上的Word軟體，開啟需要處理的文件。 （如圖）2、接著，我們將遊標定位在求和數值所在的儲存格上（如圖）；然後，我們點選【選單列
Linux Deploy的操作步驟及注意事項
Mar 14, 2024 pm 03:03 PM
LinuxDeploy的操作步驟及注意事項LinuxDeploy是一款強大的工具，可協助使用者在Android裝置上快速部署各種Linux發行版，讓使用者在行動裝置上體驗完整的Linux系統。本文將詳細介紹LinuxDeploy的操作步驟以及注意事項，同時提供具體的程式碼範例，幫助讀者更好地使用此工具。操作步驟：安裝LinuxDeploy：首先在
win10開機密碼忘記按F2怎麼操作
Feb 28, 2024 am 08:31 AM
想必很多的用戶家裡都有那麼幾台不用的電腦，因為長時間不用完全忘了開機密碼，於是想知道一下，忘記密碼要怎麼操作呢？那就一起來看看吧。 win10開機密碼忘記按F2怎麼操作1、按下電腦的電源鍵，然後開機時按下F2（不同電腦品牌進入bios的按鍵也不同）。 2.在bios介面中，找到security選項（不同品牌電腦的位置可能有所不同）。一般都在頂部的設定選單中。 3.然後找到SupervisorPassword選項並且點選。 4.這時候用戶就可以看到自己的密碼了，同時找到旁邊的Enabled切換為Dis
Word表格自動編號或序號如何插入
Mar 20, 2024 am 09:30 AM
我們在製作表格時，第一想到的是會用Excel軟體製作表格，但是你知道嗎，其實Word軟體製作表格也是非常方便的，有時我們在Word軟體裡進行表格製作的時候，需要輸入序號或編號，如果是手動一個一個地輸，那就非常地麻煩了，其實word軟體裡有一個操作能自動插入編號或序號，那麼下面就和小編一起來學習Word表格自動編號或序號怎麼插入的方法吧。 1.先建立一個Word文檔，插入表格。 2.選取需要插入自動序號或編號的列或儲存格。 3.點選「開始」—「編號」。 4.選擇其中的一種樣式的編號。 5.
