javascript - 动态显示表单数据到表格

Question

这是我的 JsFiddle

填写表格并单击添加按钮后，我希望表格数据显示在表格内。有人可以帮助我如何使用 jquery 做到这一点。

<div class="form-div">
<form class="form-inline">
    <fieldset>
        <legend>Item Details</legend>
        <label>Enter Item Name</label>
        <input type="text" placeholder="Item Name">
        <label>Quantity</label>
        <select class="input-mini">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
        <button class="btn">Add Data</button>
    </fieldset>
</form>
</div>
<div class="table-div">
<table class="table">
    <thead>
        <tr>
            <th> S.no </th>
            <th> Item Name </th>
            <th> Quantity </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

Answer 1

您应该为要操作的元素提供唯一标识符。之后，您可以使用 click()、val() 和 append() jQuery 函数执行类似的操作:

var sno = 0;
$("form button.btn").click(function() {
    var item_name = $("#item_name").val();
    var quantity = $("#quantity").val();
    var new_row = "<tr><td>" + ++sno + "</td><td>" + item_name + "</td><td>" + quantity + "</td></tr>";
    $("table tbody").append(new_row);
    return false;
});

Working demo

如果 form 和 table 元素在窗口中不是唯一的，最好给它们一个 ID 并且优化 DOM 选择。