Question

使用this和this示例方式访问table cell s的坐标非常容易。但是，当我尝试获取cell并与另一个可在页面上显示的table cell进行比较时，就会出现问题。因为我不知道如何在同一时间比较它们。经过几个小时，我试图这样做，不幸的是，仍然没有运气。

在下面的经典table列表中，显示了2个不同的table，其中包含id个不同的数字：

    <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>

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

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文本（来自第一个表格），请提醒必须出现并说出＆＃34;此table id=1 cell:2row:2中点击的文字，在table id=2 cell:2row:2＆＃34;中匹配。

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

Answer 1

我认为这就是你想要的：

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
}

Answer 2

＆＃13;

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);
}

＆＃13;

tr, th, td {
  padding: 0.2rem;
  border: 1px solid black
}

table:hover {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

获取表格单元格的坐标并通过Javascript

2 个答案: