I need to show all names found in table tb and display as list when click button display by jquery by code below i can add success but how to take data from column name and show as list this what i need actually @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(function () { $("#btn").click(function () { var x = $("#txt1").val(); var y = $("#txt2").val(); var z = $("#mycountry").val(); $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td></tr>"); }); $("#tb").on("click", ".c", function () { //$(this).parent().parent().remove(); $(this).closest('tr').remove(); }); $("#tb").on("click", ".d", function () { var row = $(this).closest('tr').toggleClass("editing"); row.find("td").slice(0, 3).prop("contenteditable", row.hasClass("editing")); }); }); </script> <style> .editing { background: yellow; } </style> </head> <body> <div> ID<input type="text" id="txt1" /><br /> Name<input type="text" id="txt2" /><br /> Country: <select id="mycountry"> <option>---select---</option> <option>Egypt</option> <option>qatar</option> <option>saudia</option> <option>emarates</option> </select><br /> <input type="button" value="add" id="btn" /> <input type="button" value="display" id="btndis" /> <table> <thead> <tr> <td> ID </td> <td> Name </td> <td> Country </td> <td> </tr> </thead> <tbody id="tb"></tbody> </table> </div> </body> </html> Code (markup):
According to your need "take data from column name and show as list", add the following code at the end of the jQuery code would work. var list = $('<ul></ul>').appendTo('body'); $('#btndis').click(function() { $('#tb td:nth-child(2)').each(function() { list.append('<li>' + $(this).text() + '</li>'); }); }); Code (JavaScript):