<style>
.field {
font-family: "MS UI Gothic";
font-size: 12px;
height: 17px;
border: 1px solid #F00000;
readonly: false;
}
.tableLightLine {
height: 20;
background-color: #FFFFFF;
font-family: "MS UI Gothic";
font-size: 12px;
color: #000000;
}
.tableDarkLine {
height: 20;
background-color: #F3F3F3;
font-family: "MS UI Gothic";
font-size: 12px;
color: #000000;
}
</style>
<script language="javascript" type="text/javascript">
function onAdd(tblId) {
var rowLen = tblId.rows.length;
var addedCount = 0;
if (rowLen > 0) {
if (tblId.rows[rowLen -1].all['itemChkedAdded']) {
addedCount = tblId.rows[rowLen - 1].all['itemChkedAdded'].value;
}
}
if (addedCount == "") {
addedCount = 0;
}
var addCountC = parseInt(addedCount);
addCountC++;
var trClassName = "";
if (tblId.rows.length % 2 == 0) {
trClassName = "tableLightLine";;
} else {
trClassName = "tableDarkLine";
}
var rowId = tblId.insertRow();
rowId.className = trClassName;
rowId.align = "center";
rowId.style.Height = "22";
var cellId = rowId.insertCell();
cellId.width = "25";
cellId.align = "center";
var innerHTML1 = "";
innerHTML1 = innerHTML1 + '<input type="checkbox" name="itemChkedAdded" id="itemChkedAdded" value="' + String(addCountC) + '" />';
innerHTML1 = innerHTML1 + '<input type="hidden" name="itemCdedAdded" id="itemCdedAdded" value="' + String(addCountC) + '" />';
cellId.innerHTML = innerHTML1;
var cellId2 = rowId.insertCell();
cellId2.width = "300";
cellId2.align = "left";
var innerHTML2 = "";
innerHTML2 = '<input type="text" name="itemNameAdded" id="itemNameAdded" class="field" size="27" maxlength="40" style="width:299px;" />';
cellId2.innerHTML = innerHTML2;
var cellId3 = rowId.insertCell();
cellId3.width = "125";
cellId3.align = "right";
var innerHTML3 = "<input name=\"diaItemPriceAdded\" id=\"diaItemPriceAdded\" "
+ "type=\"text\" class=\"field\" style=\"text-align:right;ime-mode:disabled;\" " + "size='22' "
+ "maxlength=\"11\">";
cellId3.innerHTML = innerHTML3;
}
function onDelete(tblId, checkBoxAddedId) {
var checked = false;
for (var i = 0; i < tblId.rows.length; i++) {
if (tblId.rows[i].all[checkBoxAddedId].checked) {
checked = true;
tblId.deleteRow(i);
i--;
}
}
var addCount = 0;
for (var i = 0; i < tblId.rows.length; i++) {
if (i % 2 == 0) {
tblId.rows[i].className = "tableLightLine";
} else {
tblId.rows[i].className = "tableDarkLine";
}
if (tblId.rows[i].all[checkBoxAddedId]) {
tblId.rows[i].all[checkBoxAddedId].value = String(addCount);
tblId.rows[i].all['itemCdedAdded'].value = String(addCount);
addCount++;
}
}
if (!checked) {
alert("请选择一行");
}
}
</script>
<input type="button" name="btnAdd" id="btnAdd" value="追加" onclick="onAdd(document.all['testTblId'])" />
<input type="button" name="btnDelete" id="btnDelete" value="删除" onclick="onDelete(document.all['testTblId'], 'itemChkedAdded')" />
<table width="600" border="0" align="left" id="testTblId" style="table-layout: fixed">
</table>
分享到:
相关推荐
js动态添加行和删除行
js 操作表格动态添加和删除行
JS动态添加、删除Table行排序(删除整行、删除整列)JS动态添加、删除Table行排序(删除整行、删除整列)
js动态添加 删除行
动态添加/删除表格行并实现前后台的互动,用最基础的c#和js知识实现,可以作为新手参考。
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
通过JS 动态的添加删除行。 通过JS 动态的添加删除指定行。 通过JS 对齐剩下元素的下标
利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例
通过JS实现了动态的增加一行或是删除一行,可以进行多行数据录入。
NULL 博文链接:https://long316.iteye.com/blog/1393886
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
js table添加、删除行。点“添加”按钮可以添加一行,每行后面都有一个删除按钮,可以删除所在行。
纯js实现动态为table添加删除行。实用的代码
用js实现对table添加行、删除行、复制行的操作。
动态添加js,动态添加表格和删除表格,批量添加记录,批量添加
动态插入、添加删除表格行的JS代码,网页表格操作必要的知识