locked
create dynamic table with java script RRS feed

  • Question

  • User1739307134 posted

    hello

    how i create dynamic table with java script.namely in my page i have a button and text box that i want to fire  button create a table with text box value

    Thursday, April 26, 2018 9:46 AM

Answers

  • User-369506445 posted

    hi

    please try below code :

    <input type="text" id="txt"/>
    <input type="button" id="btn" value="Add"/>
    <div id="result"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                /* Note that the whole content variable is just a string */
                var content = "<table>";
                content += '<tr><td>' + 'result ' + $("#txt").val() + '</td></tr>';
                content += "</table>";
    
                $('#result').append(content);
            });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 26, 2018 9:53 AM
  • User-369506445 posted

    please try below code :

    <input type="text" id="txt"/>
    <input type="button" id="btn" value="Add"/>
     
    <table id="myTable" class="table">
        <tr><th>Col Name</th></tr>
    </table>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                $('#myTable tr:last').after('<tr><td>' + $("#txt").val() + '</td></tr>');
            });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 26, 2018 10:52 AM

All replies

  • User-369506445 posted

    hi

    please try below code :

    <input type="text" id="txt"/>
    <input type="button" id="btn" value="Add"/>
    <div id="result"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                /* Note that the whole content variable is just a string */
                var content = "<table>";
                content += '<tr><td>' + 'result ' + $("#txt").val() + '</td></tr>';
                content += "</table>";
    
                $('#result').append(content);
            });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 26, 2018 9:53 AM
  • User1739307134 posted

    thanks about your post,your code create an new table with each click,  but i want create a new row with each click on button

    Thursday, April 26, 2018 10:03 AM
  • User-369506445 posted

    you can easy to do it, you must find the exist table and add the current row to it.

    Thursday, April 26, 2018 10:23 AM
  • User1739307134 posted

    yes,but i'm new and i can't do it. could you please show me with sample or links.

    Thursday, April 26, 2018 10:33 AM
  • User-369506445 posted

    please try below code :

    <input type="text" id="txt"/>
    <input type="button" id="btn" value="Add"/>
     
    <table id="myTable" class="table">
        <tr><th>Col Name</th></tr>
    </table>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                $('#myTable tr:last').after('<tr><td>' + $("#txt").val() + '</td></tr>');
            });
        });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 26, 2018 10:52 AM