❶ 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的
通過getSelection()得到selection以後,selection.getRangeAt(0)可以獲取頁面上的選中區range。
range.startContainer就是開始的節點,range.endContainer就是結束節點
獲取開始節點所在的行,和結束節點所在的行(不一定,可能開始或結束位置在表格外面)
獲取開始和結束行之間的行,窗口綁定鍵盤事件,當按下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。
提示:開始結束位置可能是前後關系,也可能是相反的