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
Post a Comment