2

各行に4つのセルが含まれ、各セルにデフォルトでテキストボックスが含まれるテーブルがあります。行が 1 つしかなく、クリックするたびに行を追加できるボタンがあります。

Javascript でテキストボックスを含むテーブル行を動的に追加するにはどうすればよいですか?

また、テキストボックス ID を変更したいと思います。

<input type="text" id="txtbox1" />
<input type="text" id="txtbox2" />

現在、セルを追加するコードがあります。

JavaScript:

<script type="text/javascript">
    function insertRow(){
                var table=document.getElementById("tbSibling");
                var row=table.insertRow(2);
                var cell1=row.insertCell(0);
                var cell2=row.insertCell(1);
                var cell3=row.insertCell(2);
                var cell4=row.insertCell(3);
    }
</script>

テーブル：

<table id="myTable">
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Occupation and Employer</th>
        <th>Add</th>
        <tr>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="txtAge" /></td>
            <td><input type="text" id="txtGender" /></td>
            <td><input type="text" id="txtOccupation" /></td>
            <td id="btnAdd" class="button-add" onclick="insertRow();">add</td>
        </tr>
</table>
4

7 に答える 7

4

フィドルはこちら

    var ctr = 1;
$('#myTable').on('click', '.button-add', function () {
    ctr++;
    var txtName = "txtName" + ctr;
    var txtAge = "txtAge" + ctr;
    var txtGender = "txtGender" + ctr;
    var txtOccupation = "txtOccupation" + ctr;
    var newTr = '<tr><td><input type="text" id=' + txtName + ' /></td><td><input type="text" id=' + txtAge + ' /></td><td><input type="text" id=' + txtGender + ' /></td><td><input type="text" id=' + txtOccupation + ' /></td><td id="btnAdd" class="button-add">Add</td></tr>';
    $('#myTable').append(newTr);
});
于 2013-07-17T02:24:35.740 に答える
3

テキストボックスコードを含むhtmlコードを作成し、それを要素に追加するだけです

$("#addRow").click(function(){
   $("#myTable").append("<tr><td>row</td><td><input type='text'></td></tr>");
});

あなたのための作業コードhttp://jsfiddle.net/WNDQJ/1/

于 2013-07-17T02:18:39.843 に答える
1

簡単な解決策は次のとおりです。

$('#btnAdd').click(function(e) {
    $('#myTable tr:last').after(
        '<tr><td><input type="text" id="txtName' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtAge' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtGender' + $("tr:last")[0].rowIndex + '" /></td><td><input type="text" id="txtOccupation' + $("tr:last")[0].rowIndex + '" /></td></tr>'
    );
});

サンプル フィドル: http://jsfiddle.net/YqV8G/

また、[追加] ボタンは 1 つだけにすることをお勧めします。必要でない限り、追加ボタンを複製する必要はありません。

于 2013-07-17T02:30:45.810 に答える
0

JavaScript

$(".Add").click(function () {
            $(".tbl").append(newRow);
            ddlEditSelected = '0';
            numberOfRows++;

        });




        var newRow = "<tr><td><select class='status1' id='ddlStatus'  > <option value='0'>--Select--</option><option value='2'>Schedule Variance</option>" +
                           "<option value='3'>Effort Variance</option>" +
                           "<option value='4'>GOM Variance</option>" +
                            "<option value='5'>Defect Density per Person Day of Effort</option>" +
                             "<option value='6'>Resource Variance</option>" +
                              "<option value='7'>Process Quality</option>" +
                               "<option value='8'>Non Billable CRs</option>" +


                           "<td><input type='text' class='source1' id='txtSource' name='Source'  maxlength='3' onkeypress='return isNumberKey(event)' onblur='return checkvalidation(this)' ></td></td></tr>";
    });

HTML

<table width="100%" id="qualitygoal1" class="tbl">
            <tbody>
                <tr>
                    <th align="center">Parameter</th>
                    <th align="center">WeightAge</th>


                </tr>

                @foreach (var data in Model)
                {

                    <tr>
                        <td>
                            <span class="spanStatus" id="lblStatus_@data.Id" destinationid="@data.Parameter">@data.ParameterValue</span>
                            <select class="status" id="ddlStatus_@data.Id">
                                <option value="0">--Select--</option>
                                <option value="2">Schedule Variance</option>
                                <option value="3">Effort Variance</option>
                                <option value="4">GOM Variance</option>
                                <option value="5">Defect Density per Person Day of Effort</option>
                                <option value="6">Resource Variance</option>
                                <option value="7">Process Quality</option>
                                <option value="8">Non Billable CRs</option>

                            </select>
                        </td>
                        <td>
                            <span class="spanSource" id="lblSource_@data.Id">@data.Weightages</span>
                            <input class="Source" id="txtSource_@data.Id" type="text" value="@data.Weightages" maxlength="3" onkeypress="return isNumberKey(event)" onblur="return checkvalidation(this)" />
                        </td>



                    </tr>

                }
            </tbody>
        </table>
于 2014-12-10T06:04:21.250 に答える
0 
**add button** 



<div align="right">
        <input type="button" value="Add Phase" class="Add" />

        <input type="button" value="Save" class="saved" />
        <input type="button" value="Close" class="cancel" />



    </div>
于 2014-12-10T06:22:24.410 に答える