0

私ができるスクリプトを作成しようとしています:

  1. データを追加してテーブルに追加します。と
  2. 入力したデータを編集します。

これまでのところ、これは私のコードです:

HTML:

<table class="tbl" style="width: 48%;">
    <tr>
        <td align="center">
            Name</td>
        <td align="center">
            Gender</td>
        <td align="center">
            Contact Number</td>
        <td align="center" width="70px">
            </td>
    </tr>
    <tr>
        <td>
            <input id="txtName" type="text" /></td>
        <td>
            <select id="cmbGender" name="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select></td>
        <td>
            <input id="txtContact" type="text" /></td>
        <td align="middle">
            </td>
    </tr>
    </table>
<button id="btn1">Add</button>

次に、ここに私のJavascriptがあります：

 $(document).ready(function() {
var num = 0;

    $("#btn1").click(function() {
            num += 1;
        $(".tbl").append("<tr><td>" + $("#txtName").val() + "</td><td>" + $("#cmbGender").val() + "</td><td>" + $("#txtContact").val() +"</td><td><button id=\"edit"+num+"\">Edit</button></td></tr>");
});

for(var i = 1; i <= num; i++) {
    $("#edit"+i).click(function(){
        alert(".tbl tr:eq("+i+")");
        $(".tbl tr:eq("+i+")").append("<tr><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(0)").val()+"\" /></td><td><select><option>Male</option >Male<option></option></select></td><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(2)")+"\" /></td><td></td></tr>");
    });
}
});

編集：もう1つ。処理されてデータベースに送信されるフォームになります。

4

1 に答える 1

1

すでにこれを非常にうまく行っているいくつかの既存のjavascriptライブラリの1つを使用することをお勧めします。私のお気に入りは、DataTablesDataManagerプラグインまたはjEditableプラグインと組み合わせたDataTablesjQueryプラグインです。

于 2013-01-28T04:35:35.850 に答える