请问如何指定table中的某列能获得点击事件

leetow2006 2018-06-16 02:12:44

请看我的代码：
var t=document.getElementById("tab");
var rows=t.getElementsByTagName("tr");
for(var i in rows)
{
rows[i].onclick=rowclick;
}
这里的tab是table的id名称，tr是table中的列，
我的代码是table中所有的行，任一列都能获得点击事件，
现在我希望的是所有行中，只有第8列能获得点击
事件，请问该怎么做？

...全文

1908 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

leetow2006 2018-06-17

打赏
举报

很感谢楼上网友的代码，复制你的程序可以运行，但是在我的程序中修改成你的代码，又不行了，不知道为什么但是还是很感谢

天际的海浪 2018-06-16

打赏
举报

引用 6 楼 leetow2006 的回复:

[quote=引用 4 楼 jslang 的回复:]


var t=document.getElementById("tab");
var rows=t.getElementsByTagName("tr");
for (var i = 0, len = rows.length; i < len; i++) {
	rows[i].getElementsByTagName("td")[7].onclick = rowclick; 
}

也不行，没有反应。另外：没有错误代码，我只是点击时，让框变红色。[/quote] 好吧，给你写个完整的代码


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style>
td {
	border: 1px solid #999;
	width: 50px;
}
.sel {
	border: 1px solid #f00;
}
</style>
</head>
<body>
<table id="tab">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>
<script type="text/javascript">
function rowclick() {
	this.className="sel";
}

var t=document.getElementById("tab");
var rows=t.getElementsByTagName("tr");
for (var i = 0, len = rows.length; i < len; i++) {
	rows[i].getElementsByTagName("td")[7].onclick = rowclick; 
}
</script>
</body>
</html>

ambit_tsai-微信 2018-06-16

打赏
举报

测试改变字体颜色，可以生效的。

leetow2006 2018-06-16

打赏
举报

引用 4 楼 jslang 的回复:


var t=document.getElementById("tab");
var rows=t.getElementsByTagName("tr");
for (var i = 0, len = rows.length; i < len; i++) {
	rows[i].getElementsByTagName("td")[7].onclick = rowclick; 
}

也不行，没有反应。另外：没有错误代码，我只是点击时，让框变红色。

ambit_tsai-微信 2018-06-16

打赏
举报

引用 3 楼 ambit_tsai 的回复:

我本地是可以的，不过我猛然惊觉，rows是一个数组，直接rows[7]就可以取到对应的元素了，尴尬
rows[7].onclick = rowclick; 
如果还不行，你把错误信息贴出来看看

汗颜，把第8列看出第8行了


t.querySelectorAll('td:nth-child(8)')  // 获取每个tr中的第8个td，也就是第8列
	.forEach(function(el){  // 遍历赋值
		el.onclick = rowclick;
	});

天际的海浪 2018-06-16

打赏
举报


var t=document.getElementById("tab");
var rows=t.getElementsByTagName("tr");
for (var i = 0, len = rows.length; i < len; i++) {
	rows[i].getElementsByTagName("td")[7].onclick = rowclick; 
}

ambit_tsai-微信 2018-06-16

打赏
举报

引用 2 楼 leetow2006 的回复:

[quote=引用 1 楼 ambit_tsai 的回复:]


var rows = t.getElementsByTagName('tr');
rows.item(7).onclick = rowclick;   // 第8行序号为7

我试了，不行呀，还有什么办法[/quote] 我本地是可以的，不过我猛然惊觉，rows是一个数组，直接rows[7]就可以取到对应的元素了，尴尬


rows[7].onclick = rowclick;

如果还不行，你把错误信息贴出来看看

leetow2006 2018-06-16

打赏
举报

引用 1 楼 ambit_tsai 的回复:


var rows = t.getElementsByTagName('tr');
rows.item(7).onclick = rowclick;   // 第8行序号为7

我试了，不行呀，还有什么办法

ambit_tsai-微信 2018-06-16

打赏
举报


var rows = t.getElementsByTagName('tr');
rows.item(7).onclick = rowclick;   // 第8行序号为7

给el-table-column添加指定列的点击事件

http://www.angelweb.cn/Html/jquery/jqueryshili/2870.html 以前没有jquery的时候，我们要操作一个表格，用JS的话，是很麻烦的，至少站长以前用JS来操作表格的时候，都是要到网上找封装好的函数，然后复制过来使用的，但是现在有了jquery后，操作表格table起来变得非常的容易，来看下面的几个实例，你就能明白了：实例

花了一晚上的时间解决了一个看似很容易的问题。今晚做的这个东西中由于要获取某列中的一个ID值。如果是用平常的那种JS传值的方式此问题就不存在，但是由于此次用到的都是jquery插件，包括各种弹出框，用JS传值就得用JS那丑陋的弹出框，所以，你懂得。网上找了很多方法，用起来都不行，后来想到了jquery中的鼠标事件，可以在鼠标经过table时，获得当前行与列的值。页面如下

element-ui table 自定义某列样式 // 表格每行第五列开始添加点击效果 this.$nextTick(() => { //在获得数据元素渲染后获得dom元素 for (let i = 0; i < $(".el-table__row").length; i++) { let classList = [...$(".el-table__row")[i].childNodes]; //取得想要修改样式的某几列

JavaScript遍历table1、说明遍历表格中的某行某列，并打印其值2、实现源码JavaScript遍历tabletr td,tr th{border:#CCC 1px solid;}/*** JavaScript遍历table*/function eachTableRow(){//获取table序号var tab=document.getElementById("tab");//获取行数v...

JavaScript

87,955

社区成员

224,621

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章