1

HTML を使用してテーブルを作成しました。列の 1 つに一連のボタンが含まれており、新しい行を追加したり、その特定の行を削除したり、行を上下に移動したりします。新しい行を追加することはできますが、ボタンが押された同じ行を削除するのに問題があります。アラート メソッドを使用して行インデックスを表示しました。ボタンをクリックすると、行インデックスが未定義であることが示されますが、同じ行の他の場所をクリックすると、正しい行インデックスが表示されます。

私は Javascript にかなり慣れていないので、純粋な JavaScript を使用してこれを行いたいと考えています。

どの行インデックスが呼び出されているかを知るためにアラートを設定しましたが、何らかの理由でボタンをクリックすると、行インデックスが未定義であると表示されますが、次のアラート ボックスには正しい行インデックスが表示されます。

    function removeData(x) {
        var ind = x.rowIndex;
        alert(ind);
        //document.getElementById("table1").deleteRow(ind);
    }

   <table id="table1" border="2px">
            <tr>
                <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> 
            </tr>   
            <tr id="enterData" onclick="removeData(this)">
                <td id="buttons"><input type="button" value="Remove" id="button1" onclick="removeData(this)" /> 
                    <input type="button" value="Up" id="button2" onclick="up()" />
                    <input type="button" value="Down" id="button3" onclick="down()" /> 
                    <input type="button" value="Add" id="button4" onclick="editTable()" />
                </td>
            </tr>       
        </table>
4

1 に答える 1

1

クリック イベントが DOM を介してバブルアップしているため、2 つのアラートが表示されています。

あなたtrとinput要素の両方にonclick=removeData(this)ハンドラーがあります。

最初にクリック イベントがボタンで発生し (これがrowIndexが定義されていない理由です)、次に にバブルアップしますtr(これが 2 番目のアラートで正しい値が表示される理由です)。

于 2013-02-13T18:49:40.163 に答える