2

私はjavascriptが初めてです。

onclickJavaScriptで作成されたHTMLテーブル行のクリックでイベントを実装するのを手伝ってくれる人はいますか?

を使用して表のセルにデータを挿入していることに注意してくださいinnerHTML。以下は、私が試したもののコードスニペットです。

JavaScript 関数:

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>

これにはjQueryライブラリが必要です

于 2013-07-12T00:00:44.827 に答える
1

<tr>使用する 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

それを行う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(これを1回実行する場合のみ、重複したIDは必要ありません):

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

}

イベントの詳細については、こちらを参照してください。ただし、アイデアonclickがあれば、設定できる機能は1 つだけです。より良い解決策が必要な場合は、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 に答える