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:

  1. avoid binding click handlers same elements multiple times. try bind them once, bind new elements when creating them.
  2. try avoid typing lot of html markup strings in javascript , adding document. try understand how dom works , how work it.
  3. 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

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

-
i need in configuring java on machine because, when try loading forms, loader goes in circles , gives error: java.lang.classnotfoundexception: oracle.apps.fnd.formsclient.formslauncher.class @ sun.plugin2.applet.applet2classloader.findclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass0(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadclass(unknown source) @ java.lang.classloader.loadclass(unknown source) @ sun.plugin2.applet.plugin2classloader.loadcode(unknown source) @ sun.plugin2.applet.plugin2manager.createapplet(unknown source) @ sun.plugin2.applet.plugin2manager$appletexecutionrunnable.run (unknown source) @ java.lang.thread.run(unknown source) i have tried re-installing firefox, older versions of java runtime environments, disabling proxy. what missing? application working on other machines. i spent around 100 hours finding s...
Read more

c# - how to use buttonedit in devexpress gridcontrol -

-
Image
i trying create gridcontrol buttonedit in 1 of columns. when user clicks button edit, popups form select product. when selection done on popup, returns datarow selection main grid below. but when column loses focus, value wrote column disappear. here code creates gridcontrol's data , buttonedit's click event. private void frmsiparisnew_load(object sender, eventargs e) { dt = new datatable(); dt.columns.add("malzeme_kodu",typeof(string)); dt.columns.add("malzeme_aciklama", typeof(string)); dt.columns.add("adet", typeof(decimal)); dt.columns.add("birim", typeof(string)); dt.columns.add("fiyat", typeof(decimal)); dt.columns.add("kur", typeof(string)); dt.columns.add("tutar", typeof(decimal)); datarow dr = dt.newrow(); dt.rows.add(dr); gc.datasource = dt; } private void repositoryitembuttoneditmal...
Read more

How do you convert a timestamp into a datetime in python with the correct timezone? -

-
you naively expect work: import pytz datetime import datetime def tz_datetime_from_timestamp(timestamp): """convert timestamp datetime """ tz = pytz.timezone('australia/perth') server_time = datetime.utcnow() delta = tz.utcoffset(server_time) value = datetime.utcfromtimestamp(timestamp).replace(tzinfo=tz) return value + delta print tz_datetime_from_timestamp(1416387060) and convert timestamp 1416387060 wed nov 19 16:51:00 2014 gmt+8:00. ...but not. prints: 2014-11-19 16:51:00+07:43 the timezone of australia/perth not gmt+7:43. it gmt+8:00. unequivocally stated on australian government website http://www.australia.gov.au/about-australia/our-country/time : awst equal coordinated universal time plus 8 hours (utc +8). so, heck pytz pulling 7.43 from? well, turns out pytz pulls data http://www.iana.org/time-zones time zone database, , database states: # western australia # # rule name type in on @...
Read more