动态表格例子2
程序员文章站
2022-04-03 10:01:12
...
<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 width="10%" 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 width="20%" 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 height="22" width="10%" class="td_list_2" nowrap>
数 据 项 ：
</td>
<td width="20%">
<input type="text" name="inputData" />
</td>
<td class="td_table_bottom">
<input type="button" class="unnamed_anliu" name="cmd" value=" 添 加 "
onclick="return addFileSimple('uploadFileTableID','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 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);
rowNumCell.innerHTML=currentRow;
//文本框
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 class='td_table_bottom'><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 class='td_table_bottom'><input type='button' value='删 除' onClick='return delUploadFileIcon(\""+tableID+"\","+i+");' ></td>";
operationCell.innerHTML= opetaionICONHTML;
}
}
}
</script>