1

这是我的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>
4

3 回答 3

4

您应该为要操作的元素提供唯一标识符。之后，您可以使用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;
});

工作演示

如果它们在窗口中不是唯一的，最好给一个IDtoform和元素，也可以优化 DOM 选择。table

于 2013-10-04T17:09:21.593 回答
2

编写代码并添加小提琴。

您需要获取 and 的值text并select创建一个新行，然后添加到tbody.

小提琴：http: //jsfiddle.net/aH6hb/2/

于 2013-10-04T17:12:38.870 回答
-1

试试这个

<div class="">

        <fieldset>
            <legend>Item Details</legend>
            <label>Enter Item Name</label>
            <input type="text" placeholder="Item Name" id="item_name">
            <label>Quantity</label>
            <select class="input-mini" id="quentity">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <button class="btn" onclick="viewRecord()">Add Data</button>
        </fieldset>

</div>
<div class="">
    <table class="table controls controls-row">
        <thead>
            <tr id="heading">
                <th> S.no </th>
                <th> Item Name </th>
                <th> Quantity </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

js部分

var index=0;
function viewRecord(){
    index++;
$('table tbody').append('<tr><td>'+index+'</td><td>'+$("#item_name").val()+' </td><td> '+$("#quentity option:selected").val()+'</td></tr>');
}

工作演示

于 2013-10-04T17:18:48.920 回答