//Her is the markup and belove it is the Jquery code <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.7.1.intellisense.js"></script> <script src="Scripts/jquery-1.7.1.js"></script> <script src="Scripts/MyJava.js"></script> </head> <body> <form id="form1" runat="server"> <div> <table id="Table1"> <tr> <td>Name: <asp:TextBox ID="txtName" runat="server"></asp:TextBox> </td> <td>Gender: <asp:TextBox ID="txtGender" runat="server"></asp:TextBox> </td> <td> <input type="button" class="BtnPlus" value="+" /> </td> <td> <input type="button" class="BtnMinus" value="-" /> </td> </tr> </table> <input type="button" value="Create Json" id="btnJson" /> </div> </form> </body> </html>
$(document).ready(function () { function addRow() { var html = '<tr>' + '<td>Name:' + '<input type="text" id="txtName"/>' + '</td>' + '<td>Gender:' + '<input type="text" id="txtGender" />' + '<td>' + '<input type="button" class="BtnPlus" value="+" />' + '</td>' + '<td>' + '<input type="button" class="BtnMinus" value="-" />' + '</td>' + '</tr>'; $(html).appendTo($('#Table1')); } function deleteRow() { var par = $(this).parent().parent(); par.remove(); } $('#Table1').on('click', '.BtnPlus', addRow); $('#Table1').on('click', '.BtnMinus', deleteRow); var data = { items: [] }; var name = ""; var gender = ""; $('#btnJson').click(function () { $('#Table1 tr').each(function () { if ($(this).attr("id") === "txtName") { name = $(this).text(); data.items.push($(this).val()); } if ($(this).attr("id") === "txtGender") { gender = $(this).val(); data.items.push($(this).val()); } data.push({ name: name, gender: gender }); }); console.log(data); alert(JSON.stringify(data)); }); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)