html - How can I stop this javascript code from deleting the origin/first row of my table? -


using code, can see it's easy create new rows, , delete them. problem i'm having default/origin/first row (a-t) delete - need block row deleting. can done?

<!doctype html>  <html>  <head>  <style>  table, td {  	background-color: #4caf50;      color: white;      border: 1px solid black;      text-align: center;      font-size: 14px;      cursor: pointer;  }  </style>  </head>  <body>  <table id="mytable1">    <tr>      <td>a</td>      <td>b</td>      <td>c</td>      <td>d</td>      <td>e</td>      <td>f</td>      <td>g</td>      <td>h</td>      <td>i</td>      <td>j</td>      <td>k</td>      <td>l</td>      <td>m</td>      <td>n</td>      <td>o</td>      <td>p</td>      <td>q</td>      <td>r</td>      <td>s</td>      <td>t</td>    </tr>  </table>  <button onclick="mycreatefunction()">create row</button>  <button onclick="mydeletefunction()">delete row</button>    <script>    function mycreatefunction() {      var table = document.getelementbyid("mytable1");      var row = table.insertrow(-1);      var cell1 = row.insertcell(0).contenteditable = true;      var cell2 = row.insertcell(1).contenteditable = true;      var cell3 = row.insertcell(2).contenteditable = false;      var cell4 = row.insertcell(3).contenteditable = false;      var cell5 = row.insertcell(4).contenteditable = true;      var cell6 = row.insertcell(5).contenteditable = false;      var cell7 = row.insertcell(6).contenteditable = true;      var cell8 = row.insertcell(7).contenteditable = false;      var cell9 = row.insertcell(8).contenteditable = false;      var cell10 = row.insertcell(9).contenteditable = false;      var cell11 = row.insertcell(10).contenteditable = false;      var cell12 = row.insertcell(11).contenteditable = false;      var cell13 = row.insertcell(12).contenteditable = false;      var cell14 = row.insertcell(13).contenteditable = false;      var cell15 = row.insertcell(14).contenteditable = false;      var cell16 = row.insertcell(15).contenteditable = false;      var cell17 = row.insertcell(16).contenteditable = false;      var cell18 = row.insertcell(17).contenteditable = false;      var cell19 = row.insertcell(18).contenteditable = false;      var cell20 = row.insertcell(19).contenteditable = false;      cell1.innerhtml = "";      cell2.innerhtml = "";      cell3.innerhtml = "";      cell4.innerhtml = "";      cell5.innerhtml = "";      cell6.innerhtml = "";      cell7.innerhtml = "";      cell8.innerhtml = "";      cell9.innerhtml = "";      cell10.innerhtml = "";      cell11.innerhtml = "";      cell12.innerhtml = "";      cell13.innerhtml = "";      cell14.innerhtml = "";      cell15.innerhtml = "";      cell16.innerhtml = "";      cell17.innerhtml = "";      cell18.innerhtml = "";      cell19.innerhtml = "";      cell20.innerhtml = "";    }    function mydeletefunction() {      document.getelementbyid("mytable1").deleterow(-1);  }    </script>  </body>  </html>

your current delete function blindly deletes last row of table.

function mydeletefunction() {     document.getelementbyid("mytable1").deleterow(-1); } 

if first row want preserve, ensure table has more 1 row(s) before deleting last one.

function mydeletefunction() {     // there @ least 2 or more rows. last 1 can deleted     if(document.getelementbyid("mytable1").rows.length > 1){         document.getelementbyid("mytable1").deleterow(-1);     } } 

Comments

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -