您的位置：首页 > Web前端 > JavaScript

js方法控制html表格的增加和删除

2016-06-12 17:26 525 查看 
<!DOCTYPE html>
<html>
<head>
<title>linshi3.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function insertAddress()
{
insertRow('t2','t1');
//setAddressNo();
//setAddressNum();
}

function insertRow(pageCode,dataPageCode)
{
var oTBODY     = document.getElementById(pageCode).tBodies.item(0);//Address
var oTBODYData = document.getElementById(dataPageCode).tBodies.item(0);//Address_date
var rowsCount = oTBODYData.rows.length;//1
for(var i=0;i<rowsCount;i++){
oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));
}
}

function deleteAddress(field,intPageDataKeyCount,intRowCount)//this,1,1
{
var arrayAddressNo = new Array();
var strFieldName = field.name;//button_Address_Delete,假如有3个数据
var intAddressNo = 0;
var index = 0;
var i = 0;

//得到行索引
for(i=1;i<fm.all(strFieldName).length;i++)//1--2
{
if(fm.all(strFieldName)[i]==field)
{
index = i;
break;
}
}
// intAddressNo = parseInt(fm.AddressNo[index].value,10);

deleteRow('t2',field,intPageDataKeyCount,intRowCount);
//'Address',field,intPageDataKeyCount,intRowCount
}

function deleteRow(PageCode,Field,intPageDataKeyCount,intRowCount)//'Address',this,1,1
{
if (intPageDataKeyCount==null)
{
intPageDataKeyCount = 1;
}

if (intRowCount==null)
{
intRowCount = 1;
}
intRowCount = 4;
var intIndex = parseInt(getElementOrder(Field),10) - 1;  //顺序改为以0开始
var oTBODY   = document.all(PageCode).tBodies.item(0);
for(var i=0;i<4;i++)
{
oTBODY.deleteRow(0);
}
}

function getElementOrder(field,frm)
{
var intOrder = 0;

var intCount = getElementCount(field.name,frm);
var frmForm = (frm==null?document.fm:frm);

if(intCount>1)
{
for(var i=0;i<intCount;i++)
{
if(frmForm.all(field.name)[i].name==field.name)
{
intOrder++;
}
if(frmForm.all(field.name)[i]==field)
{
break;
}
}
}
else
{
intOrder = 1;
}
return intOrder;
}

function getElementCount(strFieldName,frm)
{
var intCount = 0;
var frmForm = (frm==null?document.fm:frm);
try
{
intCount = eval( frmForm.all(strFieldName).length );
if(isNaN(intCount)) intCount = 1;
}
catch(E)
{
intCount = 0;
}

if(intCount>1 && frmForm.all(strFieldName)[0].tagName=="OPTION")
{
intCount = 1;
}

return intCount;
}

</script>
</head>

<body>
<form name="fm" id="f1" action="" method="post">

<table border="0" style="display: " id="t2">
<thead>
</thead>
<tfoot>
<tr class="common">
<td id="" >
<p align="right">
<input type="button" name="button_Address_Insert" class="button" alt="新增" value="新 增"
onclick="insertAddress()">

</p>
</td>
</tr>
</tfoot>
<tbody><!-- 增加的区域数据，在这儿 -->
</tbody>
</table>

<table border="0" style="display: none" id="t1">
<tbody>
<tr>
<td>Login:</td>
<td><input type="text" name="login" id="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"></td>
</tr>
<tr>
<td>
<input type="button" name="button_Address_Delete" class="button" alt="删除" value="删除"
onclick="deleteAddress(this,1,1)">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航