How do I get the row and column values when a button is pressed in a HTML table?

Question

I'm looking to have it so when the user clicks on one of the "Get Sequence" buttons, it calls a function, which is shared among all "Get Sequence" buttons, that passes in the values specific to that row and col.

For example, if the user were to click on the rad51/mouse "Get Sequence" button, the function would pass in "rad51" and "mouse". HTML

What I have thus far:

 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

I fixed my own problem. So what I did was assign an id to each of the buttons to the information that I was interested in. The function assigned to each button passed in the event object where I could then parse for the id with event.target.id

Answer 2

I think this could be a possible solution using Jquery, assuming your table doesn't change its structure:

$(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/

Basically i get the first <td> of the relative <tr> of the button row (to get "human" and so on). Then, i use the button index for get the text of <th> at that index.

Pure Javascript solution could be a little bit tricky.

Hope it helps