javascript - How to create a form field and update the record dynamicaly in table using java script -
example:
i created field name in html. want update field in table , want delete record whenever want to.
below example creation , deletion rows don't know how values whenever click submit , add in table using `javascript'.
<html> <head> enter code here <title> create/delete rows </title> <script language="javascript"> function addrow(tableid) { var table = document.getelementbyid(tableid); var name=document.getelementbyid("mtext"); document.getelementbyid("mtext").value = name; var rowcount = table.rows.length; var row = table.insertrow(rowcount); var cell1 = row.insertcell(0); var element1 = document.createelement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendchild(element1); var cell2 = row.insertcell(1); cell2.innerhtml = rowcount + 1; var cell3 = row.insertcell(2); var element2 = document.createelement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendchild(element2); } function deleterow(tableid) { try { var table = document.getelementbyid(tableid); var rowcount = table.rows.length; for(var i=0; i<rowcount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childnodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleterow(i); rowcount--; i--; } } }catch(e) { alert(e); } } </script> </head> <body> <label>name:</label><input type="mtext"> <input type="button"value="submit" onclick="addrow('datatable')" /> <input type="button" value="delete row" onclick="deleterow('datatable')" /> <table id="datatable" width="350px" border="1"> <tr> <td><input type="checkbox" name="chk"/></td> <td> 1 </td> <td> <input type="text" /> </td> </tr> </table> </body>
refer code..
<div id="poitablediv"> <input type="button" id="addpoibutton" value="add pois"/><br/><br/> <table id="poitable" border="1"> <tr> <td>poi</td> <td>latitude</td> <td>longitude</td> <td>delete?</td> <td>add rows?</td> </tr> <tr> <td>1</td> <td><input size=25 type="text" id="latbox"/></td> <td><input size=25 type="text" id="lngbox" readonly=true/></td> <td><input type="button" id="delpoibutton" value="delete" onclick="deleterow(this)"/></td> <td><input type="button" id="addmorepoibutton" value="add more pois" onclick="insrow()"/></td> </tr> </table> js code here..
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 = ''; x.appendchild( new_row ); } click on link below live demo
example: http://jsfiddle.net/7aedq/
Comments
Post a Comment