ボタンをクリックしたときにテーブルの行を削除するにはどうすればよいですか？Javascriptの使用

debugcn 投稿 Dev

ユルフィー

テーブルとボタン付きのHTML：

<div>
                <h1>Info</h1>
                <form>
                    <table id="t">
                        <tr>
                            <th></th>
                            <th>index</th>
                            <th>name</th>
                            <th>job</th>
                            <th>date</th>
                            <th>department</th>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>1</td>
                            <td>Alex</td>
                            <td>Hacker</td>
                            <td>100000000000000000</td>
                            <td>2</td>
                        </tr>
                    </table>
                    <br/>
                    <input type="submit" value="delete" onclick="deleteRow()">
                </form>
        </div>

チェックボックスを確立している行を削除したい。削除はボタンをクリックするだけです。

削除する必要があるJavascript関数：

function deleteRow() {
    let table = document.getElementById('t')
    let boxs = table.getElementsByTagName("input")
    for (i = 0; i < boxs.length; i++){
        if(boxs[i] == true) {
            table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
        }
    }
}

このコードをデバッグしました。配列のサイズは正しく定義されていますが、条件が満たされていません。

hkg328

あなたのコードでは、あまり変更する必要はありません。以下のようなif文を変更する必要があります。

から

if（boxs [i] == true）{

}

に

if（boxs [i] .checked == true）{

}

box [i]はオブジェクトだからです。したがって、チェックステータスを取得する場合は、boxs [i] .checkedを呼び出す必要があります。これはあなたに真/偽を与えるでしょう。

function deleteRow() {

    let table = document.getElementById('t')
    let boxs = table.getElementsByTagName("input")
    for (i = 0; i < boxs.length; i++){
        if(boxs[i].checked == true) {
         table.deleteRow((boxs[i].parentNode.parentNode).rowIndex)
        }
    }
   return false;
}

<div>
    <h1>Info</h1>
    <form onsubmit="return deleteRow()">
        <table id="t">
            <tr>
                <th></th>
                <th>index</th>
                <th>name</th>
                <th>job</th>
                <th>date</th>
                <th>department</th>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>Alex</td>
                <td>Hacker</td>
                <td>100000000000000000</td>
                <td>2</td>
            </tr>
        </table>
        <br/>
        <input type="submit" value="delete">
    </form>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]