JS实现对表单的动态添加和删除

最新推荐文章于 2022-01-12 00:19:46 发布

ck442724751

最新推荐文章于 2022-01-12 00:19:46 发布

阅读量931

点赞数

分类专栏： Js 文章标签： JS ViewUI

本文链接：https://blog.csdn.net/ck442724751/article/details/83974776

版权

Js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码，不多说
JS：
function deleteRow(field, pageCode, pageDataRowsCount, controlRowsCount) {
var obj;
var index;
if (pageDataRowsCount == undefined) {
pageDataRowsCount = 1;
}
if (controlRowsCount == undefined) {
controlRowsCount = 1;
}
//Call beforeDeleteRow of pageCode
/** obj = eval("window.beforeDelete" + upperCaseFirstChar(pageCode));
if(obj != null) {
obj.apply(obj,arguments);
}

//call realy insertRow of pageCode
obj = eval("window.delete" + upperCaseFirstChar(pageCode));
if(obj != null){
index = obj.apply(obj,arguments);
}
else{ //\u5982\u679c\u6ca1\u6709\u81ea\u5b9a\u4e49\u5220\u9664\u65b9\u6cd5\u5219\u8c03\u7528\u9ed8\u8ba4\u7684\u5220\u9664\u65b9\u6cd5
**/
index = directDeleteRow(field, pageCode, pageDataRowsCount, controlRowsCount);
/** }

//Call afterDeleteRow of pageCode
obj = eval("window.afterDelete" + upperCaseFirstChar(pageCode));
if(obj != null) {
obj.apply(obj,arguments);
}**/
}

function directDeleteRow(field, pageCode, pageDataRowsCount, controlRowsCount) {
return private_deleteRow(field, pageCode, pageDataRowsCount, controlRowsCount);
}

function private_deleteRow(field, pageCode, pageDataRowsCount, controlRowsCount) {
var oTBODY = field;
while (oTBODY != null && oTBODY.parentElement != null && oTBODY.tagName != "TBODY" && oTBODY.parentElement.id != pageCode) {
oTBODY = oTBODY.parentElement;
}

var tempElements = oTBODY.getElementsByTagName(field.tagName);
var tempElementsCount = tempElements.length;
var order = 0;
for (var i = 0; i < tempElementsCount; i++) {
if (tempElements[i].name == field.name) {
order++;
}
if (tempElements[i] == field) {
break;
}
}
order = order - pageDataRowsCount; //\u53bb\u6389\u9690\u542b\u57df\u4e2d\u7684\u63a7\u5236\u6309\u94ae\u7684\u4e2a\u6570
for (var i = 0; i < controlRowsCount; i++) {
oTBODY.removeChild(oTBODY.rows[order * controlRowsCount]);
}
recentDeletedTBody = oTBODY;
recentDeletedRowNo = order;
return order;
}

function add() {
var name = document.getElementById("keymaterial").value;
var num = document.getElementById("count").value;
var marId = document.getElementById("hidmaterialArrey").value;

var tb_attachment = document.getElementById("tblSample");
var lastRow = tb_attachment.rows.length;
var insertrow = tb_attachment.insertRow();
if (document.all) {
var td1 = insertrow.insertCell();
td1.innerHTML = "<input name='signName' type='text' value='" + name + "' readonly='true'/>";
var td2 = insertrow.insertCell();
td2.innerHTML = "<input name='signCount' type='text' value='" + num + "' style='width:20px'/>";
var td3 = insertrow.insertCell();
td3.innerHTML = "<a οnclick=\"deleteRow(this, 'tblSample', 1, 1);\">删除</a><input type='hidden' name='hiddenID' id='hiddenID' value='" + marId + "' />";
}
else {
insertrow.innerHTML = "<td><input type='text' value='" + name + "' readonly='true'/><input type='text' value='" + num + "' style='width:20px'/></td><a οnclick=\"deleteRow(this, 'tblSample', 1, 1);\">删除</a><input type='hidden' name='hiddenID' id='hiddenID' value='" + marId + "' />"
}
document.getElementById("keymaterial").value = "";
document.getElementById("count").value = "1";
}

前台:
<asp:Panel ID="pOne" runat="server" BorderStyle="None" GroupingText="预支材料区" Width="200px" Height="200px">
<table id="tblSample"></table>
</asp:Panel>