How to prevent the first row in table by using javascript and html

Question

I have one table and I included the delete button in each column. Also I included the add row button. The problem I'm facing is, If i delete the first row I can't add the new row or let me know how to restrict the user to delete the first row. I think by applying the checkbox so whenever the user want to delete the row they can check the checkbox and delete it.

The script for Add/Delete:

 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> 

Answer 1

Just put a length check of rows while deleting

 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> 

Answer 2

The easiest way to do this is to hide the first row by eg adding a style="display: none;" to the tr .

Then every newly cloned row can be viewed by removing the styles with 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> 

Answer 3

Just create your table with separate thead and tbody part as in example, move the id property "POITable" to tbody, and your JS code will work without any changes...

<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>

Answer 4

I'm not sure if u got your question right.

However. My solution would be this:

I'm sure you can not prevent the row from displaying. But using a code like this should help:

1.Step: Hide the first row:

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

2.Step: Show the newly created tr:

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