Add Item to Table - HTML/CSS/JS

Question

Let's say I have a dropdown (or combobox) and it has list of things. Once I select one thing from the list, it will automatically add to Table. How would I do that? Possible it is only HTML/JS?

Dropdown:

<select class="combobox form-control" style="display: none;">
    <option value="" selected="selected">Point Guard</option>
    <option value="CP3">Chris Paul (93)</option>
 </select>

Table:

<table class="table">
    <thead>
      <tr>
        <th>Position</th>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
      </tr>
    </tbody>
</table>

Thanks.

Answer 1

Using jQuery:

$('.combobox').change(function(e) {

   var selectedVal = $(this).val();
   $('.table').append('<tr><td>' + selectedVal + '</td></tr>');

});

I hope you get the idea.

Answer 2

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".combobox").change(function () {
                var temp1 = $(".combobox option:selected").text().split(' ');
                $('.table tr:last').after('<tr><td>' + $('.table tr').length + '</td><td>' + temp1[0] + '</td><td>' + temp1[1] + '</td></tr>');
            });
        });

        function removeItem() {
            $('.table tbody tr:first').remove();
            //.eq() -- You can also use this to fetch nth row
        }
    </script>
</head>
<body>
    <select class="combobox form-control">
        <option value="" selected="selected">Point Guard</option>
        <option value="CP3">Chris Paul (93)</option>
    </select>
    <button onclick="removeItem()">Remove First Row</button>
    <table class="table">
        <thead>
            <tr>
                <th>Position</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
        </tbody>
    </table>


</body>
</html>

Add Item to Table - HTML/CSS/JS

Question

2 answers

solution1
0 ACCPTED 2014-07-26 22:34:55

solution2
0 2014-07-26 22:48:54

Add Item to Table - HTML/CSS/JS

Question

2 answers

solution1 0 ACCPTED 2014-07-26 22:34:55

solution2 0 2014-07-26 22:48:54

solution1
0 ACCPTED 2014-07-26 22:34:55

solution2
0 2014-07-26 22:48:54