jquery - delete and reset html table row ids for the rest of the table -

-

how reset html table row id , name after deleting row using jquery. example html table has 5 rows , if delete 3rd row, actual 4th , 5th row textbox id should become 3 , 4

<script type="text/javascript"> $("#add").on("click",function() { var data ='<tr><td>2</td><td><input type="text" id="name2" value=""/></td><td><input type="text" id="phone2" value=""/></td><td><input type="text" id="email2" value=""/></td><td><button id="delete">delete</button></td></tr>'; $("tbody").append(data); }); </script> <button id="add">add row</button> <table> <tbody> <tr> <td>1</td> <td><input type="text" id="name1" value=""/></td> <td><input type="text" id="phone1" value=""/></td> <td><input type="text" id="email1" value=""/></td> <td><button id="delete">delete</button></td> </tr> </tbody> </table>

so first must declare global counter window.globalcounter = 2; you'll store rows counter. (what index have added row)

then when add increment window.globalcounter++.

and when delete, must fetch currentrow, decrement counter, , refactor indexes.

  $("tbody").on("click", "#delete", function (ev) {          // delete row         var $currenttablerow = $(ev.currenttarget).parents('tr')[0];         $currenttablerow.remove();         window.globalcounter--;          // refactor indexes         $('table').find('tr').each(function (index) {             var firsttddomel = $(this).find('td')[0];             var $firsttdjqobject = $(firsttddomel);             $firsttdjqobject.text(index + 1);         });      });

here working code snippet.

window.globalcounter = 2;    $(document).ready(function () {      $("#add").on("click", function () {          var data = '<tr><td>' + window.globalcounter + '</td><td><input type="text" id="name2" value=""/></td><td><input type="text" id="phone2" value=""/></td><td><input type="text" id="email2" value=""/></td><td><button id="delete">delete</button></td></tr>';          $("tbody").append(data);          window.globalcounter++;      });        $("tbody").on("click", "#delete", function (ev) {          var $currenttablerow = $(ev.currenttarget).parents('tr')[0];          $currenttablerow.remove();          window.globalcounter--;                    $('table').find('tr').each(function (index) {              var firsttddomel = $(this).find('td')[0];              var $firsttdjqobject = $(firsttddomel);              $firsttdjqobject.text(index + 1);          });      });      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  <button id="add">add row</button>  <table>      <tbody>          <tr>              <td>1</td>              <td>                  <input type="text" id="name1" value="" />              </td>              <td>                  <input type="text" id="phone1" value="" />              </td>              <td>                  <input type="text" id="email1" value="" />              </td>              <td>                  <button id="delete">delete</button>              </td>          </tr>      </tbody>  </table>

here have alternative working jsfiddle: https://jsfiddle.net/cn5p4oke/

of course must adjust phone2, email2, name2 ids.

please note used jquery 2.1.0.


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more