Add rows to jQuery table after the the present row -


I wanted to know how I would like to know about adding rows after a particular line in my dataset. I am using jQuery datatable plug-in for this purpose.

I can pass table row index. That I need to insert the line in my Javascript function, such as:

function addNewContact (rCount) {..}

and my HTML code Is:
table id = "example tbl"
tr. TD .... / TD (data of the first column)
TD .... / TD (Data of the second column)
... TD
input type = "button" id = "AddNewContact & lt;% = rCount%>" name = "addNewContact_Details" value = "+" onclick = "javascript: addNewContact (& lt;% = RCount%>);" / td
/ tr
/ Table

For the newly added line, I want the first 3 columns to be blank and the other column (5) to include the text box.

Below your table, looks like this:

  & lt ; Table id = "example tbl" & gt; & Lt; TR & gt; & Lt; TD & gt; .... & lt; / TD & gt; & Lt; TD & gt; .... & lt; / TD & gt; ... & lt; Td> & Lt; Button type = "button" class = "adrev" /> + & Lt; / Button & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;  

You can add a click handler to a button that adds a line like this:

  $ (function () {// one line HTML Template Var HTML = ' Tr & gt; & lt; td & gt; & lt; / td & gt; ... & lt; TD & gt; & gt; Button Type = "Button" class = " Adrev "& gt; + & lt; / button & gt; & lt; / td & gt; & lt; / tr & gt; $ $ ('# exampleTbl') representative ('button.addRow', 'click ', Function () {var row = $ (this) .closest (' tr '); // the original line of clicked button $ (html); insertAfter (line); // insert content});});  

Some notes:

  • The code is executed after the DOM is loaded, $ (function () {...} ) Due to .
  • Click the click event from the table to ensure that the buttons of the newly inserted rows also work.
  • Do not mix styles If you use jQuery, do not attach click handlers to the HTML via the onclick attribute that makes it hard to keep your code And you make it more flexible than the jQuery method.

Hopefully if you have any questions about this, please comment on this post.


Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -