2017-11-11 57 views
0

我有一個表,並且在每列中都包含了刪除按鈕。還包括添加行按鈕。我面臨的問題是,如果我刪除第一行,我不能添加新行或讓我知道如何限制用戶刪除第一行。我想通過應用複選框,以便每當用戶想要刪除行時,他們可以選中複選框並將其刪除。如何使用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>

enter image description here

+0

聽起來像是對的情況下:第一子類僞 - https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child – DaveCoast

+0

@ArunBaskar不幸的是,所有的答案都錯誤。尋找我的答案 - 它不僅簡單得多,而且也是首選方式。 – WaldemarIce

回答

1

最簡單的方法是隱藏第一行,例如將style="display: none;"添加到tr

然後,每個新克隆的行都可以通過刪除new_row.setAttribute('style', '');的樣式來查看。

function deleteRow(row) { 
 
    var i = row.parentNode.parentNode.rowIndex; 
 
    document.getElementById('POITable').deleteRow(i); 
 
} 
 

 

 
function insRow() { 
 
    console.log('creating new row...'); 
 
    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 = ''; 
 
    
 
    // Remove styles of new row 
 
    new_row.setAttribute('style', ''); 
 
    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> 
 
    <!-- hide first row by default --> 
 
    <tr style="display: none"> 
 
    <td style="display:none">1</td> 
 
    <td> 
 
     <input type="text" id="txtAutoComplete" list="languageList" /> 
 
     <!--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="width:80px;"></td> 
 
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td> 
 
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td> 
 
    <td><input type="text" id="txtbox" name="name" style="width:75px;"></td> 
 
    <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td> 
 
    </tr> 
 

 
    </tr> 
 
</table>

1

只要把行的長度檢查,同時刪除

function deleteRow(row) 
 
{ 
 
    var x=document.getElementById('POITable'); 
 
    var len = x.rows.length; 
 
    if(len>2){ 
 
    var i=row.parentNode.parentNode.rowIndex; 
 
    document.getElementById('POITable').deleteRow(i); 
 
    } 
 
    else{ 
 
    alert("Can't delete the first row"); 
 
    } 
 
} 
 

 
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>

+0

包含此功能後,我無法刪除新行。 –

+0

@ArunBaskar更新我的答案檢查它。我剛剛意識到你最初有2行,還有我的錯字。我添加了檢查'x'而不是'len' –

+0

@ArunBaskar你檢查了更新的答案? –

0

我不確定你是否有正確的答案。

但是,我的解決方案是:

我相信你不能阻止行顯示。但是,使用這樣的代碼應該有所幫助:

1.Step:隱藏的第一行:

$("table tr:eq(1) td:eq(3) input").css("display","none"); 

2.Step:顯示新創建的TR:

var nothing = $("#yourtable tr").length-1; 
$("table tr:eq("+ nothing +") td:eq(3) input").css("display","block"); 
1

只需創建表與獨立theadtbody一部分的例子中,id屬性「POITable」移到TBODY,和你的JS代碼將沒有任何變化工作...

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
    </tr> 
    </thead> 
    <tbody id="POITable> 
    <tr> 
     <td>Row 1</td> 
     <td>Row 1</td> 
    </tr> 
    <tr> 
     <td>Row 2</td> 
     <td>Row 2</td> 
    </tr> 
    </tbody> 
</table> 
相關問題