Javascript 如何使用textbox动态添加表行？

我有一个表格，每行包含4个单元格，每个单元格包含一个文本框 默认情况下。我只有一行和一个按钮，允许我在每次单击时添加一行

如何在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>

函数insertRow（）{
var table=document.getElementById（“tbSibling”）；
var行=table.insertRow（2）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
}

表格：

<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>

名称
年龄
性别
职业和雇主
添加
添加

只需创建一个带有文本框代码的html代码，然后将其附加到元素上即可

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

$（“#添加行”）。单击（函数（）{
$（“#myTable”）。追加（“行”）；
});

您的工作代码

以下是

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

var-ctr=1；
$（'#myTable'）。在（'单击'，'按钮添加'，函数（）{
ctr++；
var txtName=“txtName”+ctr；
var txtAge=“txtAge”+ctr；
var txtGender=“txtGender”+ctr；
var txtOccupation=“txtOccupation”+ctr；
var newTr='添加'；
$（'#myTable'）。追加（newTr）；
});

这里有一个快速解决方案：

$('#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>'
    );
});

$（'#btnAdd'）。单击（函数（e）{
$（'#myTable tr:last'）。之后(
''
);
});

提琴样品：

---

另外，我建议您只有一个添加按钮。除非您需要，否则不需要复制添加按钮。

检查一下，这就是您想要的，使用纯javascript即可。

var i=1；
函数addRow（）
{
var tbl=document.getElementById（'table1'）；
var lastRow=tbl.rows.length；
var迭代=最后一行-1；
变量行=tbl.insertRow（最后一行）；
var firstCell=row.insertCell（0）；
var el=document.createElement（'input'）；
el.type='text'；
el.name='name_u'+i；
el.id='name_u'+i；
el.size=20；
el.maxlength=20；
第一个细胞。追加子细胞（el）；
//警报（一）；
i++；
frm.h.值=i；
//警报（一）；
}
你好
这是4

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

$（“.Add”）。单击（函数（）{
$（“.tbl”）.append（newRow）；
ddlEditSelected='0'；
numberOfRows++；
});
var newRow=“--选择--计划差异”+
“努力差异”+
“GOM差异”+
“每人每天工作的缺陷密度”+
“资源差异”+
“工艺质量”+
“非计费CRs”+
"";
});

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>

参数
重量
@foreach（模型中的var数据）
{
@data.ParameterValue
--挑选--
进度差异
努力差异
GOM方差
每人每天工作的缺陷密度
资源差异
工艺质量
非计费CRs
@数据.权重
}

**添加按钮**

不同行中的所有文本框都有相同的输入ID@VondNo id。发问者希望所有动态生成的输入都有不同的ID。@编辑帖子时，请删除与问题无关的问候语/结束语。请参阅。感谢您指出，我不确定是否要从问题中删除。我以后会这么做。我不喜欢把所有的东西都浓缩成一条长长的线，但这确实对我想做的事情起到了很好的作用！

**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>