javascript - how to enable row count to automatically reorder in html -
so let added row 1 2 3 4 5 if delete row 2 3 , how make current row become 1 4 5 1 2 3 , add new row start 4 instead of 6. following example of current code
this fiddle, somehow add row didnt work in fiddle working @ site http://jsfiddle.net/q0kcnk6r/
</script> //$('btnaddd').click(function(){ var count =0; function add(){ $("#tbldata tbody").append( "<tr>"+ "<td ><input type='text' size ='2' value ='"+ ++count +"' /></td>"+ "<td><input type='text' size ='43'/></td>"+ "<td><input type='text' size ='4'/></td>"+ "<td><img src='img/disk.jpg' class='btnsave'><img src='img/delete.png' class='btndelete'/></td>"+ "</tr>"); $(".btnsave").bind("click", save); $(".btndelete").bind("click", delete); }; function save(){ var par = $(this).parent().parent(); //tr var tdname = par.children("td:nth-child(1)"); var tdphone = par.children("td:nth-child(2)"); var tdemail = par.children("td:nth-child(3)"); var tdbuttons = par.children("td:nth-child(4)"); tdname.html(tdname.children("input[type=text]").val()); tdphone.html(tdphone.children("input[type=text]").val()); tdemail.html(tdemail.children("input[type=text]").val()); tdbuttons.html("<img src='img/delete.png' class='btndelete'/><img src='img/edit.png' class='btnedit'/>"); $(".btnedit").bind("click", edit); $(".btndelete").bind("click", delete); }; function edit(){ var par = $(this).parent().parent(); //tr var tdname = par.children("td:nth-child(1)"); var tdphone = par.children("td:nth-child(2)"); var tdemail = par.children("td:nth-child(3)"); var tdbuttons = par.children("td:nth-child(4)"); tdname.html("<input type='text' id='txtname' value='"+tdname.html()+"'/>"); tdphone.html("<input type='text' id='txtphone' value='"+tdphone.html()+"'/>"); tdemail.html("<input type='text' id='txtemail' value='"+tdemail.html()+"'/>"); tdbuttons.html("<img src='img/disk.jpg' class='btnsave'/>"); $(".btnsave").bind("click", save); $(".btnedit").bind("click", edit); $(".btndelete").bind("click", delete); }; function delete(){ var par = $(this).parent().parent(); //tr par.remove(); }; $(function(){ //add, save, edit , delete functions code $(".btnedit").bind("click", edit); $(".btndelete").bind("click", delete); $("#btnadd").bind("click", add); }); </script> </head> <body> <table border="1" id="tbldata"> <thead> <tr> <th width ="20px">id</th> <th width ="360px">item</th> <th width ="20px">quantity</th> <th><input type="button" id="btnaddd" value="new" onclick="add()" /></th> </tr> </thead> <tbody> </tbody> </table> </body> </html>
with jquery, can set value of element based on index of selector. in case, may this:
first step, add name attributes input in id column, or other thing select them:
<input name="row-id" /> then, select these inputs, , set value based on position in document:
function reorder() { $('input[name="row-id"]').val(function(index) { return index+''; }); } your code has flaws, like:
- avoid binding click handlers same elements multiple times. try bind them once, bind new elements when creating them.
- try avoid typing lot of html markup strings in javascript , adding document. try understand how dom works , how work it.
- don't use images buttons. semantics differ , encounter lot of trouble make , act buttons.
i've added reorder function jsfiddle show working you, did not fix flaws i've mentioned: http://jsfiddle.net/q0kcnk6r/6/
Comments
Post a Comment