如何爲通過Java腳本動態創建的HTML表格行添加onclick事件。

Question

我是javascript新手。

任何人都可以幫助我實現一個onclick事件點擊HTML表格行通過JavaScript創建？

請注意，我使用innerHTML將數據插入表格單元格中。 下面是我試過的代碼片段。？

Java腳本函數：在JSP

function addRow(msg) 
{ 
    var table = document.getElementById("NotesFinancialSummary"); 
    var finSumArr1 = msg.split("^"); 
    var length = finSumArr1.length-1; 
    alert("length"+ length); 
    for(var i=1; i<finSumArr1.length; i++) 
    { 
     var row = table.insertRow(-1); 
     var rowValues1 = finSumArr1[i].split("|"); 
     for(var k=0;k<=10;k++) 
     {  
      var cell1 = row.insertCell(k); 
      var element1 = rowValues1[k]; 
      cell1.innerHTML = element1;  
     } 


    } 

     for(var i=1; i<rowCount; i++) 
     { 
      for(var k=0;k<=10;k++) 
      { 
       document.getElementById("NotesFinancialSummary").rows[i].cells[k].addEventListener("click", function(){enableProfileDiv()}, false); 


      } 
     }  

} 

HTML表格代碼：

 <TABLE id="NotesFinancialSummary" width="800px" border="1" align="left" > 
<tr > 

       <th>Symbol</th> 
       <th>Claimant</th> 
       <th>MJC</th> 
       <th>S</th> 
       <th>Type</th> 
       <th>Indemnity Resv</th> 
       <th>Indemnity Paid</th> 
       <th>Medical Resv</th> 
       <th>Medical Paid</th> 
       <th>Legal Resv</th> 
       <th>Legal Paid</th> 
    </tr> 
     <tr> 
        <td> 
        </td> 
        <TD> </TD>   
        <TD> </TD> 
        <TD> </TD>   
        <TD> </TD> 
        <TD> </TD>   
         <TD> </TD> 
         <TD> </TD> 
         <TD> </TD> 
         <TD> </TD> 
         <TD> </TD> 
     </tr> 



    </table> 

Answer 1

<table id="table"></table>

$("#table").append("<tr><td>Hi there</td></tr>"); 

$("#table").on("click", "tr", function(){ 
    // do something 
    alert($(this).children("td:first").text()); 
}); 

任何時候click事件氣泡高達<table id="table">，這個函數將被調用（不管<tr>是動態插入還是硬編碼）。

這將需要jQuery庫

• http://jquery.com/
• http://api.jquery.com/on/

Answer 2

一種方式，將使用document.createElement

而不是做的事：

yourParentElement.innerHTML = "<tr>Something</tr>"; 

你可以做

var tr = document.createElement("tr"); 
tr.innerHTML = "Something"; 
tr.onclick = function() { 
    //code to be executed onclick 
}; 
yourParentElement.appendChild(tr); 

另一種方法，是使用一個id（只有，如果你這樣做一次，你不想重複IDS）：

yourParentElement.innerHTML = "<tr id='someId'>Something</tr>"; 
document.getElementById("someId").onclick = function() { //fetch the element and set the event 

} 

你可以閱讀更多關於事件here，但只是讓你有個想法onclick只會讓你設置一個函數。 如果您想要更好的解決方案，您可以使用類似addEventListener的東西，但它不是crossbrowser，因此您可能需要閱讀它。

最後，如果你想建立一個事件上每tr你可以使用：

var trs = document.getElementByTagName("tr"); //this returns an array of trs 
//loop through the tr array and set the event 

Answer 3

您使用的innerHTML插入您<tr>後，創建一個click事件偵聽它。

document.getElementById("the new id of your tr").addEventListener("click", function() { 
    what you want to do on click; 
}); 

Answer 4

事情是這樣的：http://jsfiddle.net/gnBtr/

var startEl = document.getElementById('start'); 
var containerEl = document.getElementById('container'); 

var inner = '<div id="content" style = "background: pink; padding:20px;" > click on me </div>' 

// Function to change the content of containerEl 
function modifyContents() { 
    containerEl.innerHTML = inner; 
    var contentEl = document.getElementById('content'); 
    contentEl.addEventListener("click", handleClickOnContents, false); 
} 

// listenting to clikc on element created via innerHTML 
function handleClickOnContents() { 
    alert("you clicked on a div that was dynamically created"); 
} 

// add event listeners 
startEl.addEventListener("click", modifyContents, false); 

Answer 5

檢查出來：

$('#your_table_id tbody').on('click', 'tr', function (e) { 
    $('td', this).css('background-color', 'yellow'); 
}); 

CSS：

tr:hover td{ 
    background-color: lightsteelblue !important; 
} 

它正常工作對我來說，特別是當我使用jquery dataTable分頁。