私がこれまでに実施したもの:javascriptを使用してテーブル内の特定の行を削除するにはどうすればよいですか?
- は、入力フィールドに値を入力し、「追加」ボタンをクリックし、入力した値が新しい行に追加されます。
- [削除]ボタンをクリックすると、すべての行が削除されています。私が実装する必要がどのよう
:
- チェックボックスは、すべての行に追加されるはずです。
- チェックボックスをオンにして[削除]ボタンをクリックすると、その特定の行だけが削除され、複数のチェックボックスを選択すると機能するはずです。 3.追加ボタンをクリックして入力フィールドをクリアします。 誰でもこれをチェックして、それを行う方法を教えてもらえますか?
//Javascript code to Add new rows onclick of a button and to delete row .
function addMoreRows() {
var user = document.getElementById('user_id').value;
var date = document.getElementById('date').value;
var color = document.getElementById('color').value;
var table = document.getElementById('tbl_id');
var row = table.insertRow();
var userName = row.insertCell(0);
var Date = row.insertCell(1);
var Color = row.insertCell(2);
var checkbox = row.insertCell(3);
userName.innerHTML = user;
Date.innerHTML = date;
Color.innerHTML = color;
}
function deleteMoreRows(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.deleteRow(i);
rowCount--;
i--;
}
}
<!-- HTML markup for the input fields and table . -->
<form align="center" method="GET">
Enter your name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br>
Select the Date : <input type="date" id="date"><br>
Select your favorite color:
<select id="color" required>
<option value="yellow">yellow</option>
<option value="red">red</option>
</select>
<br>
<br>
<input type="button" id="mysubmit" value="Add Row" onClick="addMoreRows()">
<input type="button" id="delete" value="Delete" onClick="deleteMoreRows('tbl_id')">
</form>
<br>
<br>
<table id="tbl_id" style="text-align:center" align="center" valign="top">
<thead>
<tr>
<th style="width:200px;">Name</th>
<th style="width:200px;">Date</th>
<th style="width:200px;">Color</th>
</tr>
</thead>
残りのロジックを実装しようとしているときに、あなたが得ているすべての問題? –
F12キーを押してJavaScriptコンソールを開きます。削除をクリックすると、どのようなエラーが表示されますか? – mkaatman
@mkaatman、私はエラーを表示していませんが、削除をクリックするとすべての行が削除されます。チェックボックスの選択時に削除する特定の行が必要です。しかし、私はどのように各行にチェックボックスを追加し、検証するかわかりません。 – Vivek