通过Javascript获取表格单元格的坐标，并与不同的表格进行比较

Getting coordinates of table cells and comparing with different tables via Javascript

本文关键字：表格 比较 获取 Javascript 单元格 坐标 通过      更新时间：2023-09-26

用这个和这个示例方法访问table cell的坐标真的很容易。但是，当我试图获取cell并与页面上可用的另一个table的cell进行比较时，就会出现问题。因为我不知道如何在同一时间比较它们。我试了好几个小时才这么做，可惜还是没什么运气。

在下面的经典table列表中，显示了具有不同id编号的2个不同table：

    <table id="a1">
        <tbody>
            <tr>
                <td>RED</td>
                <td>GREEN</td>
                <td>BLUE</td>
            </tr>
            <tr>
                <td>YELLOW</td>
                <td>PINK</td>
                <td>samespothere</td>
            </tr>
        </tbody>
    </table>
<hr>
    <table id="a2">
       <tbody>
            <tr>
                <td>BLACK</td>
                <td>BROWN</td>
                <td>WHITE</td>
            </tr>
            <tr>
                <td>CYAN</td>
                <td>GRAY</td>
                <td>samespothereANDsomeextra</td>
            </tr>
        </tbody>
    </table>

此外，我使用这个JS示例的修改版本来获取cells的位置。我所做的这个修改版本无法进行比较操作。我刚刚编辑过，让它更容易。

var cells = document.getElementsByTagName("td");  //For all table cells on page.
var i;
for(i = 0; i < cells.length; i++)
{
    cells[i].onclick = vera;
}
function vera()
{
        var cellIndex  = this.cellIndex + 1;  
        var rowIndex = this.parentNode.rowIndex + 1;
        var centra = cellIndex +","+ rowIndex;  //This gives the coordinate of cell which you clicked on.  
        alert(centra);
}

这是我的问题：当我点击samespothere（我写的示例text）table cell时，我需要进行比较操作。比较操作应能够与其他table的相同位置进行比较。让我们这样想：如果第二个table cell（相同的位置，不同的table）包括一些点击的cell的文本（来自第一个表），则必须显示警报并说"此点击的文本在table id=1 cell:2row:2中，在table id=2 cell:2row:2中匹配"。

这是在线代码：http://jsfiddle.net/LujydnaL/

我想这就是你想要的：

function vera()
{
    var cellIndex  = this.cellIndex + 1;  
    var rowIndex = this.parentNode.rowIndex + 1; 
    var centra = cellIndex +","+ rowIndex; //This gives the coordinate of cell which you clicked on.
    alert(centra);
    // new code here
    table2 = document.getElementById('a2');
    rowInTable2 = table2.getElementsByTagName('tr')[rowIndex-1];
    cellInTable2 = rowInTable2.getElementsByTagName('td')[cellIndex-1];
    console.log(cellInTable2);
    // do something with cellInTable2 now
}


window.onload = function () {
  document.getElementsByTagName('table')[0].addEventListener('click', function(element) {
    var rowIndex = element.target.parentElement.rowIndex;
    var cellIndex = element.target.cellIndex;
    
    var compare = document.getElementsByTagName('table')[1].rows[rowIndex].cells[cellIndex];
    
    var myNodelist = document.querySelectorAll("td");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      myNodelist[i].style.backgroundColor = "white";
    }
    
    compare.style.backgroundColor = "grey";    
    
    document.getElementById('alert1').innerHTML = ('CLICK => Row index = ' + rowIndex + ', Column index = ' + cellIndex);
    document.getElementById('alert2').innerHTML = ('COMPARE = ' + compare.innerHTML)
 }, false);
}
tr, th, td {
  padding: 0.2rem;
  border: 1px solid black
}
table:hover {
  cursor: pointer;
}
<table>
        <tbody>
            <tr>
                <td>a11</td>
                <td>a12</td>
                <td>a13</td>
            </tr>
            <tr>
                <td>a21</td>
                <td>a22</td>
                <td>a23</td>
            </tr>
        </tbody>
    </table>
<p id="alert1"></p>    
<hr>
    <table>
       <tbody>
            <tr>
                <td>b11</td>
                <td>b12</td>
                <td>b13</td>
            </tr>
            <tr>
                <td>b21</td>
                <td>b22</td>
                <td>b23</td>
            </tr>
        </tbody>
    </table>
<p id="alert2"></p>

相关文章：