有哪位大神帮忙说一下js代码,获取元素位置!!
<!-- 为表格table和上表头添加id -->
<table id="tables" border="1">
<tr id="topHeader">
<th></th>
<th>周一</th><th>周二</th>
<th>周三</th><th>周四</th>
<th>周五</th><th>周六</th>
<th>周日</th>
</tr>
<tr>
<th>张三</th>
<td></td><td></td>
<td></td><td></td>
<td></td><td></td>
<td></td>
</tr>
<tr>
<th>李四</th>
<td></td><td></td>
<td></td><td></td>
<td></td><td></td>
<td></td>
</tr>
<tr>
<th>王五</th>
<td></td><td></td>
<td></td><td></td>
<td></td><td></td>
<td></td>
</tr>
</table>
//通过table的id在js中获取html中的table元素
const table = document.getElementById('tables');
//获取table下的每一个td
const td = table.getElementsByTagName('td');
//通过tr的id获取上表头元素,也就是第一行
const tr = document.getElementById('topHeader');
//获取上表头下的每一个th
const th = tr.getElementsByTagName('th');
//for循环遍历每一个td元素
for (let i = 0; i < td.length; i++) {
//为每一个元素添加一个click事件
td[i].addEventListener('click',() => {
//点击该td时先找到该节点的父节点(parentNode)也就是td所在的tr,再寻找tr下的第一个子节点,第一个子节点都为th,最后获取到th中的文本元素,
var leftHeader = td[i].parentNode.firstChild.innerHTML;
//每行有7个td,用td的所有个数对7求余可以得出该td所在的列,但因为实际每行有8列,所以对应列因加1,(i%7+1)的值就是对应的表头元素的位置
var topHeader = th[i%7+1].innerHTML;
//将获取的上表头元素文本和左表头元素文本添加到该表格中
td[i].innerHTML = leftHeader + topHeader
})
}
如果有帮助到你 请采纳
f12
你不会是想做表格内编辑吧?table控件那么多,为啥不用?不香么?
(1)静态绑定的话,绑定方法时,直接将需要的参数传进去,例如:<a onclick="myClick(this,a,b)">点我</a>,第一个this代表元素本身
(2)动态绑定的话,方法里 直接用this就代表本身元素,其他参数可以通过属性,缓存等多种方式存储获取
循环成表格的时候 增加 横轴id,绑定事件的时候传递
你点击的元素,id='13' 左边第一个的id是10,上边第一个的id是03