2

我是 JavaScript 新手。

谁能帮我实现一个onclick点击通过 javascript 创建的 HTML 表格行的事件？

请注意，我正在使用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>
4

5 回答 5

2

<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>s 是动态插入的，还是硬编码的）。

这将需要 jQuery 库

于 2013-07-12T00:00:44.827 回答
1

插入<tr>using innerHTML 后，为其创建一个单击事件侦听器。

document.getElementById("the new id of your tr").addEventListener("click", function() {
     what you want to do on click;
});
于 2013-07-12T00:09:11.180 回答
1

一种方法是使用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
于 2013-07-12T00:06:39.727 回答
0

像这样的东西：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);
于 2013-07-12T00:19:33.703 回答
0

一探究竟：

$('#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 分页时。

于 2014-08-25T00:16:33.190 回答