导航:首页 > 编程语言 > 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

友情链接