我有一個表,並且在每列中都包含了刪除按鈕。還包括添加行按鈕。我面臨的問題是,如果我刪除第一行,我不能添加新行或讓我知道如何限制用戶刪除第一行。我想通過應用複選框,以便每當用戶想要刪除行時,他們可以選中複選框並將其刪除。如何使用javascript和html防止表中的第一行
用於添加腳本/刪除:
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow() {
console.log('hi');
var x = document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
x.appendChild(new_row);
}
<table id="POITable">
<tr>
<th width="100px" style="display:none">SL.no</th>
<th width="100px">col1</th>
<th width="85px">col2</th>
<th width="85px">col3</th>
<th width="85px">col4</th>
<th width="95px">col5</th>
<th width="100px">Delete/<input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()" /></th>
</tr>
<tr>
<td style="display:none">1</td>
<td>
<input type="text" id="txtAutoComplete" list="languageList" style="border:none;font-size:10pt;width:100px;" />
<!--your input textbox-->
<datalist id="languageList">
<option value="Dddd" />
<option value="DTdsds" />
<option value="adsda" />
<option value="adsadsad" />
<option value="dadsada" />
<option value="rsfsfsdfs" />
<option value="Csffsf" />
</datalist>
</td>
<td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:80px;"></td>
<td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
<td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
<td><input type="text" id="txtbox" name="name" style="border:none;font-size:10pt;width:75px;"></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
</tr>
</tr>
</table>
聽起來像是對的情況下:第一子類僞 - https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child – DaveCoast
@ArunBaskar不幸的是,所有的答案都錯誤。尋找我的答案 - 它不僅簡單得多,而且也是首選方式。 – WaldemarIce