html5 - How to delete a specific row in a table using javascript? -
what have implemented far:
- enter values in input fields , click " add" button , entered values gets added new row .
- and when click delete button, rows getting deleted .
what need implement :
- checkbox should added every row .
- if select checkbox , click "delete" button, particular row should deleted , should work if select multiple check boxes well. 3.clear input fields after click add button . can check out , tell me how .
//javascript code add new rows onclick of button , delete row . function addmorerows() { var user = document.getelementbyid('user_id').value; var date = document.getelementbyid('date').value; var color = document.getelementbyid('color').value; var table = document.getelementbyid('tbl_id'); var row = table.insertrow(); var username = row.insertcell(0); var date = row.insertcell(1); var color = row.insertcell(2); var checkbox = row.insertcell(3); username.innerhtml = user; date.innerhtml = date; color.innerhtml = color; } function deletemorerows(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; (var = 0; < rowcount; i++) { table.deleterow(i); rowcount--; i--; } }<!-- html markup input fields , table . --> <form align="center" method="get"> enter name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br> select date : <input type="date" id="date"><br> select favorite color: <select id="color" required> <option value="yellow">yellow</option> <option value="red">red</option> </select> <br> <br> <input type="button" id="mysubmit" value="add row" onclick="addmorerows()"> <input type="button" id="delete" value="delete" onclick="deletemorerows('tbl_id')"> </form> <br> <br> <table id="tbl_id" style="text-align:center" align="center" valign="top"> <thead> <tr> <th style="width:200px;">name</th> <th style="width:200px;">date</th> <th style="width:200px;">color</th> </tr> </thead>
let me know if works you:
//javascript code add new rows onclick of button , delete row . var rowid = 0; function addmorerows() { var user = document.getelementbyid('user_id').value; var date = document.getelementbyid('date').value; var color = document.getelementbyid('color').value; var table = document.getelementbyid('tbl_id'); var row = table.insertrow(); var rowbox = row.insertcell(0); var username = row.insertcell(1); var date = row.insertcell(2); var color = row.insertcell(3); var checkbox = row.insertcell(4); rowbox.innerhtml = '<input type="checkbox" id="delete' + getrowid() + '">'; username.innerhtml = user; date.innerhtml = date; color.innerhtml = color; } function deletemorerows(tableid) { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; var selectedrows = getcheckedboxes(); selectedrows.foreach(function(currentvalue) { deleterowbycheckboxid(currentvalue.id); }); } function getrowid() { rowid += 1; return rowid; } function getrowidsfromelements($array) { var arrids = []; $array.foreach(function(currentvalue, index, array){ arrids.push(getrowidfromelement(currentvalue)); }); return arrids; } function getrowidfromelement($el) { return $el.id.split('delete')[1]; } //ref: http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes function getcheckedboxes() { var inputs = document.getelementsbytagname("input"); var checkboxeschecked = []; // loop on them (var i=0; < inputs.length; i++) { // , stick checked ones onto array... if (inputs[i].checked) { checkboxeschecked.push(inputs[i]); } } // return array if non-empty, or null return checkboxeschecked.length > 0 ? checkboxeschecked : null; } //ref: http://stackoverflow.com/questions/4967223/delete-a-row-from-a-table-by-id function deleterowbycheckboxid(checkboxid) { var checkbox = document.getelementbyid(checkboxid); var row = checkbox.parentnode.parentnode; //box, cell, row, table var table = row.parentnode; while ( table && table.tagname != 'table' ) table = table.parentnode; if (!table) return; table.deleterow(row.rowindex); }<!-- html markup input fields , table . --> <form align="center" method="get"> enter name : <input type="text" name="users" id="user_id" value="name" onfocus="if(this.value == 'name') {this.value=''}" onblur="if(this.value == ''){this.value ='name'}"><br> select date : <input type="date" id="date"><br> select favorite color: <select id="color" required> <option value="yellow">yellow</option> <option value="red">red</option> </select> <br> <br> <input type="button" id="mysubmit" value="add row" onclick="addmorerows()"> <input type="button" id="delete" value="delete" onclick="deletemorerows('tbl_id')"> </form> <br> <br> <table id="tbl_id" style="text-align:center" align="center" valign="top"> <thead> <tr> <th style="width:200px;">delete</th> <th style="width:200px;">name</th> <th style="width:200px;">date</th> <th style="width:200px;">color</th> </tr> </thead>
Comments
Post a Comment