[英]How to dynamically add a table row with textbox?
我有一个表,其中每行包含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>
使用纯JavaScript进行检查,这就是您想要的一切。 JSFIDDLE
var index = 1;
function insertRow(){
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
index++;
}
这是FIDDLE
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);
});
只需创建带有文本框代码的html代码,然后将其附加到元素上
$("#addRow").click(function(){
$("#myTable").append("<tr><td>row</td><td><input type='text'></td></tr>");
});
这是一个快速的解决方案:
$('#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/
另外,我建议您只有一个“添加”按钮。 除非需要,否则不需要重复添加按钮。
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'name_' + i;
el.id = 'name_' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
// alert(i);
i++;
frm.h.value=i;
// alert(i);
}
</script>
<!DOCTYPE html>
<html>
<body>
<form action="addtablerow3.php" method="post" name="frm" id="frm">
<input type="button" value="Add New Item" onclick="addRow();" />
</form>
<table id="table1" border="1" width="100%">
<tr>
<td width="10%" bgcolor="#336666">HI </td>
<td> this </td><td>is </td><td> 4</td>
</tr>
</table>
</body>
</html>
的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>
**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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.