1

これが私のJsFiddleです

フォームに入力して追加ボタンをクリックした後、フォームデータをテーブル内に表示したい。誰かが私を助けてくれますか？

<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;
});

ワーキングデモ

ウィンドウ内で一意でない場合、および DOM の選択を最適化するために、IDtoformおよび要素を指定することをお勧めします。table

于 2013-10-04T17:09:21.593 に答える
2

コードを書き、フィドルを追加しました。

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 に答える