如何在HTML表格中按下按鈕時獲取行和列值？

我正在尋找它，所以當用戶點擊其中一個「獲取序列」按鈕時，它會調用一個函數，該函數在所有「獲取序列」按鈕之間共享，傳入特定於該行的值以及山坳。如何在HTML表格中按下按鈕時獲取行和列值？

例如，如果用戶點擊rad51/mouse「Get Sequence」按鈕，該函數將傳入「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++; 

     } 
    };

來源

2017-04-22 Hawkeyes

我固定我自己的問題。所以我所做的就是爲每個按鈕分配一個id給我感興趣的信息。分配給每個按鈕的函數在事件對象中傳遞，然後我可以使用event.target.id解析id

來源

2017-04-22 18:10:40 Hawkeyes

我認爲這可能是使用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解決方案可能有點棘手。

希望它有幫助

來源

2017-04-22 18:25:03 FFdeveloper

如何在HTML表格中按下按鈕時獲取行和列值？

回答

相關問題