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>

Sounds like a case for the :first-child pseudo class - developer.mozilla.org/en-US/docs/Web/CSS/:first-child — DaveStSomeWhere
– DaveStSomeWhere, Commented Nov 11, 2017 at 13:30
@ArunBaskar Unfortunately, all answers are wrong. Look for my answer - it is not only much simplier, but it is preferred way also. — user6748331
– user6748331, Commented Nov 11, 2017 at 13:45

lumio · Accepted Answer · 2017-11-11 13:33:16Z

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>

lumio · Accepted Answer · 2017-11-11 13:39:51Z

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>

edited Nov 11, 2017 at 13:39

lumio

7,6054 gold badges42 silver badges60 bronze badges

answered Nov 11, 2017 at 13:26

Sanchit Patiyal

4,9301 gold badge16 silver badges31 bronze badges

7 Comments

Aroon Over a year ago

i can't delete the new rows after include this function.

Sanchit Patiyal Over a year ago

@ArunBaskar updated my answer check it. I just realized you have 2 rows initially and my typo. I added check on x instead of len

Aroon Over a year ago

Thank you so much @Sanchit. Works like a piece of cake.

Sanchit Patiyal Over a year ago

@ArunBaskar Glad I helped :)

Aroon Over a year ago

Hey @Sanchit after i entered the first row It automatically adds the data to the columns when i click the Add button

|

score 1 · Accepted Answer · 2017-11-11 13:52:52Z

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>

edited Nov 11, 2017 at 13:52

answered Nov 11, 2017 at 13:43

user6748331

Comments

Jonas0000 · Accepted Answer · 2017-11-11 13:28:35Z

0

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");

answered Nov 11, 2017 at 13:28

Jonas0000

1,1231 gold badge13 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related