动态表格例子1
程序员文章站
2022-04-03 09:17:15
...
<html>
<head>
<title>数据项</title>
<link rel="stylesheet" type="text/css"
href="/pages/style/default/css/tab-tidy.css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_all">
<tr>
<td class="td_list_1" nowrap>
</td>
<td class="td_list_1" nowrap>
数 据 项
</td>
</tr>
</table>
<table id="uploadFileTableID" width="100%" border="0" cellpadding="0"
cellspacing="0" class="table_all">
<tr>
<td height="22" width="10%" align="center" class="td_list_2" nowrap>
<!--<input type="checkbox" class="input_checkbox" name=zheID value=zheID />-->
</td>
<td nowrap class="td_list_2" nowrap>
<!-- <input type="text" value="s" />-->
</td>
<td nowrap class="td_list_2" nowrap>
<!-- <input type="text" value="s" />-->
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_all">
<tr>
<td class="td_list_2" colspan="10">
</td>
</tr>
<tr>
<td colspan="10" class="td_table_bottom">
<input type="button" class="unnamed_anliu" name="cmd" value="添 加"
onclick="return addFileSimple('uploadFileTableID','inputData');" />
<input type="button" class="unnamed_anliu" name="cmd" value="删 除"
onclick="delFileSimple('uploadFileTableID')" />
</td>
</tr>
<tr>
<td height="22" align="center" class="td_list_2" nowrap>
数据项
</td>
<td>
<input type="text" name="inputData" />
</td>
</tr>
<tr>
<td colspan="10">
<input type="button" class="unnamed_anliu" value="提 交"
onclick="toSave()" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
//author: zheyiw
//date: 23/7/20009
function toSave(){
window.close();
}
//用多选按钮删除
function delFileSimple(tableID)
{
var objTable=document.getElementById(tableID);
var rows=objTable.rows;
var length=rows.length;
var i=1;
if(rows!==null) {
for(i=1;i<length;i++)
{
//alert(rows.cells[0].childNodes[0].checked);
if (rows.cells[0].childNodes[0].checked)
{
objTable.deleteRow(i);
i=i-1; length=length-1; //rows[]会根据页面上显示的行自动更新
}
}
}
}
function addFileSimple(tableID,inputData)
{
var a=document.getElementById(inputData);
if (a.value=="") {
alert("请在下面的数据项中输入数据");
return false;
}
else {
var addData=a.value;
a.value="";
}
var uploadFileTable=document.getElementById(tableID);
var rows=uploadFileTable.rows;
var currentRow=0;
if(rows!==null) {currentRow=rows.length; }
//alert("begin to isnert rows");
var newRow=uploadFileTable.insertRow();
//编号
var rowNumCell=newRow.insertCell(0);
var InputHTML="";
InputHTML+="<input type='checkBox' name='check' />"
rowNumCell.innerHTML=InputHTML;
//文本框
var filePathCell=newRow.insertCell(1);
var fileUploadInputHTML="";
fileUploadInputHTML+="<input type='text' name='addData' value="+addData+" />"
filePathCell.innerHTML=fileUploadInputHTML;
//添加删除按钮
var operationCell=newRow.insertCell(2);
var opetaionICONHTML= "<td align='center'><input type='button' value='删除' onClick='return delUploadFileIcon(\""+tableID+"\","+currentRow+");' ></td>";
operationCell.innerHTML= opetaionICONHTML;
indexUploadFile(tableID);
return false;
}
//用行后面的删除按钮删除
function delUploadFileIcon(tableID,rowNO)
{
var uploadFileTable=document.getElementById(tableID);
uploadFileTable.deleteRow(rowNO);
indexUploadFile(tableID);
return false;
}
function indexUploadFile(tableID)
{
var uploadFileTable=document.getElementById(tableID);
var rows=uploadFileTable.rows;
var operationCell
var currentRow=0;
if(rows!==null) {currentRow=rows.length; }
if(rows!==null) {
for(var i=1;i<rows.length;i++)
{
//rows.cells[0].innerHTML=i;
//更新删除按钮
//最笨的方法，先删除后添加
rows.deleteCell(2);
var operationCell=rows.insertCell(2);
var opetaionICONHTML= "<td align='center'><input type='button' value='删除' onClick='return delUploadFileIcon(\""+tableID+"\","+i+");' ></td>";
operationCell.innerHTML= opetaionICONHTML;
}
}
}
</script>
上一篇： 简单的日历控件