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

Question

有哪位大神帮忙说一下js代码,获取元素位置!!

Answer 1

<!-- 为表格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
                })
            }

如果有帮助到你 请采纳