如何為通過Java腳本動態創建的HTML表行放置onclick事件？

Question

我是javascript新手。

有人可以幫助我在通過javascript創建的HTML表格行點擊時實現onclick事件嗎？

請注意，我正在使用innerHTML在表單元格中插入數據。 以下是我嘗試過的代碼片段。

Java腳本功能：

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


            }
        }       

}

jsp中的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 （ 僅當您執行一次此操作時，才不需要重復的ID）：

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

}

您可以在此處閱讀有關事件的更多信息，但只有這樣，您才能知道onclick只會設置一個功能。 如果您想要更好的解決方案，可以使用諸如addEventListener之類的東西，但是它不是跨瀏覽器的，因此您可能需要閱讀它。

最后，如果您想在每個 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分頁時。