![](/img/trans.png)
[英]How to avoid the first row getting deleted while adding and removing html table rows using DOM?
[英]How to change the button in the first row of a HTML table using DOM ? (Adding and removing rows by DOM)
在下面的小提琴中,我嘗試使用DOM添加和刪除表行。 根據腳本,每行的最后一個字段將具有一個刪除按鈕。 但是我希望第一個字段中的刪除按鈕是表外的添加按鈕。
僅第一行中的按鈕應為添加行按鈕。 該行的其余部分應保持原樣的刪除按鈕。 我怎樣才能做到這一點 ?
jsfiddle- http://jsfiddle.net/7AeDQ/33/
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 = '';
x.appendChild( new_row );
}
<div id="POItablediv">
<input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/>
<table id="POITable" border="1">
<tr>
<td>POI</td>
<td>Latitude</td>
<td>Longitude</td>
<td>Delete?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
</table>
您可以通過克隆現有行(和現有按鈕)來創建新行。 如果希望第一行中的按鈕的行為與其他行不同,則需要在insRow函數中覆蓋更改的行為(就像當前對輸入ID所做的那樣)。
嘗試將代碼更改為:
HTML:
...
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Add More POIs" onclick="insRow()"/></td>
</tr>
...
JS:
function deleteRow(evt) {
var i = evt.target.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow() {
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 button = new_row.cells[3].getElementsByTagName('input')[0];
button.value = "Delete row";
button.onclick = function(it) {deleteRow(it)};
x.appendChild( new_row );
}
我可以猜測您的表將動態生成,這就是您遇到問題的原因。
jQuery解決方案,正如您所標記的:
$(function(){
$("#POITable tr").eq(1).find('td:last').html('<input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/>');
});
演示: http : //jsfiddle.net/7AeDQ/59/
另外,您的刪除按鈕將出現多次,因此請不要像以前那樣使用固定的id
:
<input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/>
而是使用class
或使用增量ID,例如id="delPOIbutton-1"
, id="delPOIbutton-2"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.