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

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 3

The easiest way to do this is to hide the first row by e.g. 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 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");