1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

show all names found in table (tb) when click display button

Discussion in 'jQuery' started by ahmedsalah, Jul 22, 2016.

0
  1. #1
    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):

     
    ahmedsalah, Jul 22, 2016 IP
  2. ZeeshanButt

    ZeeshanButt Well-Known Member

    Messages:
    307
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    110
    #2
    By names, do u mean the headings in the table?
     
    ZeeshanButt, Aug 5, 2016 IP
  3. Ian08

    Ian08 Well-Known Member

    Messages:
    93
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    108
    #3
    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):
     
    Ian08, Aug 7, 2016 IP