Javascript 将项添加到表中-HTML/CSS/JS_Javascript_Html_Css

Javascript 将项添加到表中-HTML/CSS/JS

javascript html css

Javascript 将项添加到表中-HTML/CSS/JS,javascript,html,css,Javascript,Html,Css,假设我有一个下拉框或组合框，它有一个列表。一旦我从列表中选择一项，它将自动添加到表中。我该怎么做？可能只是HTML/JS 下拉列表： <select class="combobox form-control" style="display: none;"> <option value="" selected="selected">Point Guard</option> <option value="CP3">Chris Paul

假设我有一个下拉框或组合框，它有一个列表。一旦我从列表中选择一项，它将自动添加到表中。我该怎么做？可能只是HTML/JS

下拉列表：

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

表:

<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>

谢谢。

使用jQuery：

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

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

});

我希望您能理解。

请尝试下面的代码片段

<!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>

您能详细说明一下您的场景吗？@JayeshGoyani一旦我从下拉列表中选择了该项目，该项目将插入表中。你明白了吗？如何插入所选项目并添加到表中。使用.onchange事件，然后创建一些HTML并将其附加到表中。为什么使用display:none；在“选择”标记上。这样它就看不见了。您想要Jquery中的解决方案吗？谢谢！它起作用了！我有一个问题，如果我想更改该项目，我将如何从表中删除该项目？@bensingh给该tr一个id，然后选择它，而不是表代码。而不是使用jQuery的.append use.html函数。@bensingh是否得到了它？很抱歉回复太长。如果我这样做，它会删除标题名、姓氏等。是否仍要避免删除标题@FaizAhmed@bensingh我说给那个被选中的Val一个id