js获取元素位置,哪位大神帮帮忙,急急急

有哪位大神帮忙说一下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