rowIndexを使用して、クリックした行のすぐ下に新しい行を挿入します

debugcn 投稿 Dev

デュードロップ

以下は私が次のことをするために書いたコードです

各テーブル行には「+」ボタンが含まれています
ボタンをクリックすると、コードはクリックされた行の行インデックスを見つける必要があります
次に、新しい行がcilcked行の（rowindex + 1）位置に追加されます。つまり、クリックした行のすぐ下です。

しかし今、問題が発生するのは

ボタン内のonclick関数が機能していません。内部に書き込むと機能します。
'cell3'のボタンのonclickが機能していません

私はPHPの初心者であり、JavaScriptの初心者なので、詳細な説明を教えてください。

<script>
function myFunction(x) {
var table = document.getElementById("myTable");

var rowno=x.rowIndex;
alert(rowno);

var row = table.insertRow(rowno+1);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<input type="text"s name="txt1">';
cell2.innerHTML = '<input type="text" name="txt2">';
cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';

}
</script>

<table id="myTable" border="1">

<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
 </tr>

<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>

<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><button onclick="myFunction(this)">+</button></td>
</tr>

</table>

Dennisjsk

ボタンを関数に渡して、不可能なrowIndexを見つけようとしています。ボタンの親行のrowIndexを見つける必要があります。javascriptコードを変更して選択しました。これはうまくいくはずです。

<script type="text/javascript">

    function myFunction(x) {
        var table = document.getElementById("myTable");
        var rowno = x.parentNode.parentNode.rowIndex; //this selects the button's parent row        
        alert(rowno);
        var row = table.insertRow(rowno + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = '<input type="text"s name="txt1">';
        cell2.innerHTML = '<input type="text" name="txt2">';
        cell3.innerHTML = '<input type="button" name="btn" value="+" onclick="myFunction(this)">';

    }
</script>