在HTML表中按下按钮时，如何获取行和列的值？

Question

我正在寻找它，以便当用户单击“获取序列”按钮之一时，它调用一个函数，该函数在所有“获取序列”按钮之间共享，该函数将传递特定于该行和列的值。

例如，如果用户单击rad51 / mouse的“获取序列”按钮，则该函数将传递“ rad51”和“ mouse”。 的HTML

到目前为止，我有：

 function createTable(){

        //call firebase
        var genes = ["rad51", "dmc1"];
        var genomes = ["human", "mouse", "dog"];

        var geneCount = genes.length;
        var genomeCount = genomes.length;

        var table = document.getElementById("inventory");
        var firstRow = document.getElementById("firstRow");

        var x = 0;
        var y = 0;

        while(x < geneCount){

            var data = document.createElement('td');
            var text = document.createTextNode(genes[x]);

            data.appendChild(text);
            firstRow.appendChild(data);

            x++;
        }

        while(y < genomeCount){

            //create new row
            var newRow = document.createElement('tr');
            var data = document.createElement('td');
            var text = document.createTextNode(genomes[y]);

            data.appendChild(text);
            newRow.appendChild(data);

            x = 0;
            while(x < genes.length){

                var currentGene = genes[x];
                var currentGenome = genomes[y];

                data = document.createElement('td');
                data.setAttribute("id", currentGene);

                var getSequenceButton = document.createElement("button");
                text = document.createTextNode("Get Sequence");


                getSequenceButton.appendChild(text);
               ???----> getSequenceButton.addEventListener("click", getId(this.parent));

                var changeColorButton = document.createElement("button");

                data.appendChild(getSequenceButton);
                data.appendChild(changeColorButton);

                newRow.appendChild(data);

                x++;
            }

            table.appendChild(newRow);

            y++;

        }
    };

Answer 1

我解决了自己的问题。 因此，我要做的就是为每个按钮分配一个ID给我感兴趣的信息。分配给每个按钮的函数传递给事件对象，然后我可以使用event.target.id解析ID。

Answer 2

我认为这可能是使用Jquery的可能解决方案，假设您的表未更改其结构：

$(document).ready(function(){
$(".table_button").click(function(){
    //alert(this.innerHTML);
        var rowValue = $(this).parent().children().first().text();

        var columnValue = $("th").eq($(this).parent().find(this).index()).text();
        //alert($(this).parent().find(this).index());
 alert("RowValue: " + rowValue + "\n" + "ColumnValue: " + columnValue);
  });
});

https://jsfiddle.net/ow1naqvL/

基本上我得到按钮行的相对<tr>的第一个<td> （得到“人类”，依此类推）。 然后，我使用按钮索引在该索引处获取<th>的文本。

纯Javascript解决方案可能会有些棘手。

希望能帮助到你