導航:首頁 > 編程語言 > js獲得表格的指定行

js獲得表格的指定行

 發布時間：2025-07-09 21:45:12

❶ js實現點擊一個按鈕，表格中某行變色，按鈕的value與表格中列name值相同的行變色

<table>
<tr id="r1">
<td name="r1c1"><input id="button" type="button" value="r1" onClick="changeColor(this)"/></td>
</tr>
<tr id="r2">
<td name="r2c1"><input id="button" type="button" value="r2" onClick="changeColor(this)"/></td>
</tr>
</table>

<script>
function changeColor(obj){
var tri = obj.value;

document.getElementById(tri).style.backgroundColor = 'red';
}

</script>
不通的話自己調一下，盲寫的。

❷ 在js中怎樣獲取當前頁面表格中的數據

1、JS獲取表格的簡便方法：獲取tbody:tBodies 獲取thead:tHead 獲取tfoot:tFoot 獲取行tr:rows 獲取列td:cells

使用實例： oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]

2、遍歷
var oTable=document.getElementById("表格id");
oTable.tBodies[0]可以看成是rows和cells組成的二維數組，用兩個for循環嵌套遍歷一下就可以了

❸ js 如何獲得被選中checkbox這行tr

<html>
<head>
<title>復選框刪除表格行</title>
<script type="text/javascript">
function del() {
var tb = document.getElementById("tb");
if (tb.rows.length < 2) {
return;
}
var row;
var cell;
var chk;
//倒著迭代可以少做一些處理
for (var i = tb.rows.length - 1; i > 0; i--) {//如果要迭代第一行(i > -1)即可
row = tb.rows[i];//迭代當前行
cell = row.cells[0];//復選框所在的單元格
chk = cell.getElementsByTagName("input")[0];//為單元格中第幾個INPUT元素
if (chk.checked) {//如果選中
tb.deleteRow(i);//刪除改行
}
}
}
var html;
function reTB() {
document.getElementById("contentDiv").innerHTML = html;
}
window.onload = function () {
html = document.getElementById("contentDiv").innerHTML;
}
</script>
</head>
<body>
<input type="button" value="刪除選中行" onclick="del()"/>
<input type="button" value="刷新" onclick="reTB()"/>
<div id="contentDiv">
<table id="tb" width="250px" border="1px" >
<tr><td style="width:20%"><input type="checkbox" /></td><td style="width:40%">姓名</td><td>分數</td></tr>
<tr><td><input type="checkbox" /></td><td>aa</td><td>60</td></tr>
<tr><td><input type="checkbox" /></td><td>bb</td><td>67</td></tr>
<tr><td><input type="checkbox" /></td><td>cc</td><td>59</td></tr>
<tr><td><input type="checkbox" /></td><td>dd</td><td>70</td></tr>
<tr><td><input type="checkbox" /></td><td>ee</td><td>80</td></tr>
<tr><td><input type="checkbox" /></td><td>ff</td><td>90</td></tr>
<tr><td><input type="checkbox" /></td><td>gg</td><td>hh</td></tr>
<tr><td><input type="checkbox" /></td><td>ii</td><td>98</td></tr>
<tr><td><input type="checkbox" /></td><td>jj</td><td>99</td></tr>
<tr><td><input type="checkbox" /></td><td>kk</td><td>100</td></tr>
</table>
</div>
</body>
</html>

❹ javaScript中table表任意復制一行怎麼實現JS

table表任意復制一行的關鍵是復制哪行，插入到什麼位置，如何插入。
第 一個問題復制哪行，通常是點擊某一行以確定復制的當前行，核心代碼如下：
var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3)
targ = targ.parentNode
if(targ.tagName=="TD")
第 二個問題插入位置，通常是點擊行的下面
pos = targ.parentNode.rowIndex+1
也有可能在表頭首行pos =0
再就是表尾"beforeEnd"
第三個問題如何插入,先復制當前行：
var con = targ.parentNode.cloneNode(true);
再進行插入，可以是insertRow，也可以是insertAdjacentElement：
var x=document.getElementById('myTable').insertRow(pos)；
document.getElementById('myTable').insertAdjacentElement("beforeEnd",con);
復制之後可對復制行里的內容進行修改調整：
var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value
也可進行刪除指定行：
document.getElementById('myTable').removeChild(Obj.parentNode.rows[i]);

❺ js 表格的每一行都有一個按鈕 點擊按鈕修改當前行某一列的信息

1、首先，新建一個測試網頁，網頁中主要添加有可視控制項表格<table>和按鈕<button>。

❻ 用js實現 刪除選中表格的行

你這個如果要通過選中區域來獲取對應的行，要兼容IE8-的話，可以對比一下

獲取當前選中區：

IE8-：window.document.selection

chrome IE9+ w3c：window.getSelection()

要照顧就頭痛，方法完全不一樣

只講講w3c的

  1. 通過getSelection()得到selection以後，selection.getRangeAt(0)可以獲取頁面上的選中區range。

  2. range.startContainer就是開始的節點，range.endContainer就是結束節點

  3. 獲取開始節點所在的行，和結束節點所在的行（不一定，可能開始或結束位置在表格外面）

  4. 獲取開始和結束行之間的行，窗口綁定鍵盤事件，當按下delete按鍵觸發刪除操作。

關於selection和range信息參考：

URL:www.w3school.com.cn/xmldom/dom_range.asp


分太少，本來不想回答的。。。以前寫html編輯器時糾結了好久這個選中區域。


這個問題不用選中區域變通來做也很好的，畢竟沒編輯器復雜：

用mousedown和mouseup事件來獲取開始節點和結束節點

table.addEventListener(mousedown,fn)，fn可以獲取到事件的target對象，即開始節點

table.addEventListener(mouseup,fn)，fn可以獲取到事件的target對象，即結束節點

然後照3、4步即可完成操作，或者用別的方法如mouseover感知經過了的tr。


提示：開始結束位置可能是前後關系，也可能是相反的

閱讀全文

與js獲得表格的指定行相關的資料

熱點內容
fu是什麼海淘網站 瀏覽：620
u盤和充電器數據線哪個好 瀏覽：969
中走絲下載什麼編程軟體 瀏覽：643
win10創建讀取文件 瀏覽：211
win10激活文件夾可以刪除嗎 瀏覽：719
佳能5D4照片文件名 瀏覽：953
冷門旅遊景點app哪個好 瀏覽：606
如何用qq郵箱發送文件 瀏覽：792
柚子音樂下載的音樂找不到文件夾 瀏覽：179
linuxarm配置文件 瀏覽：423
c盤oem文件夾 瀏覽：776
一人我飲酒醉多版本的 瀏覽：845
海克斯康三次元如何編程循環測量 瀏覽：518
app無法下載是為什麼蘋果手機 瀏覽：518
右擊此電腦管理找不到此文件 瀏覽：264
圖像文件格式百科 瀏覽：523
沒有網路怎麼定位 瀏覽：972
剪切到優盤文件找不到了 瀏覽：764
電腦管家的文件名 瀏覽：910
如何將掃描文件轉換為電子版 瀏覽：4

友情鏈接