导航:首页 > 编程语言 > 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获得表格的指定行相关的资料

热点内容
电脑管家的文件名 浏览：910
如何将扫描文件转换为电子版 浏览：4
u盘的h246文件怎么播放 浏览：203
如何用阿里云服务器学习数据库 浏览：84
华为文件管理找不到下载文件 浏览：409
word模板dot的使用 浏览：466
春节车找人app哪个好 浏览：618
文件管理电脑找不到了怎么办 浏览：516
如何改变app图标图片 浏览：767
什么是大数据结构的最低层 浏览：575
pdf文件给对方后期改密码收回 浏览：295
word2010怎么画箭头 浏览：184
win10的自动备份文件在哪个目录 浏览：843
文件夹打包成jar 浏览：456
卸载鲁大师找不到文件 浏览：173
汇编程序不知道哪里有错误 浏览：821
ai视频教程cs5 浏览：379
亿林网络怎么样 浏览：102
新版本安戈洛猎人配卡 浏览：81
手机documents找不到文件 浏览：520

友情链接