JS动态创建HTML对象

<script type="text/javascript">
//一次最多只能插入10個城市的信息
//檢查新增城市的數目是否超過10，超過了就無法增加
function checkRowsLimit()
{
var rowLimit = 10;
var len=document.getElementById('inputarea').rows.length;
if(len==rowLimit)
{
alert('抱歉，一次只能添加10個城市的信息，請先保存后再新增');
return false;
}
else
{
return true;
}
}

function addNewRow()
{
var obj=document.getElementById('inputarea');

var row=obj.insertRow(-1);
var c0=row.insertCell(0);
c0.innerHTML='請輸入城市名稱';
c0.align='right';

var c1=row.insertCell(1);
c1.innerHTML='<input type="text" name="cityOne.name" style="margin-left:1px;"/>';
c1.align='left';

var c2=row.insertCell(2);
c2.innerHTML='<a href="javascript:void(0)" onclick="removeRow(this)">[刪除]</a>';
changeFlag = true;
try
{
comm_set_page_height();
}
catch (e)
{
}
}
function removeRow(fontobj)
{
if(confirm("確定刪除該項嗎?"))
{
var obj=document.getElementById('inputarea');
var n=fontobj.parentNode.parentNode.rowIndex;
obj.deleteRow(n);
}
}
</script>

 

 

下面是页面的具体调用：

<table width="735" border="0" id="inputarea">

<tr>

<td align=right>請輸入城市名稱:</td>

<td align=left><input type="text" style="MARGIN-LEFT: 1px" name="cityOne.name"/></td>
<td><a href="#" onClick="if(checkRowsLimit()) {addNewRow();}"
title="点击后在上面添加的输入框">[添加条目]</a>
</td>
</tr>

</table>