//动态添加行
function addRowMx() {
if(document.all.mxTable.rows.length > 20){
alert("您最多可以添加20行。");
}else{
//添加一行
var newTr = document.all.mxTable.insertRow();
var rowId = document.all.mxTable.rows.length;
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd4 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input name="mxRecord'+ rowId + '" type="text" class="input" maxlength="70" style="width:20%;">.${domainName}';
newTd1.innerHTML = '<input name="mxContent'+ rowId + '" type="text" class="input" maxlength="70" style="width:100%;">';
newTd2.innerHTML = '<input name="mxPrio'+ rowId + '" type="text" class="input" maxlength="70" style="width:100%;" value="20">';
newTd3.innerHTML = '<input name="mxTtl'+ rowId + '" type="text" class="input" maxlength="70" style="width:100%;" value="3600"> <input type="hidden" name= "mxId" value="' + rowId + '" id = "mxId" >';
}
}
//删除当前行
function delMyRow(j){
var mytable = document.getElementById("mybody");
var myrow = document.getElementById("tr"+j);
mytable.deleteRow(myrow.rowIndex-1);
}
//删除所有行
function delAllMyRow(){
var mytable = document.getElementById("mybody");
var rowlen=mytable.rows.length;
for(var i=rowlen-1;i>=0;i--){
mytable.deleteRow(i);
}
}
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="pageTb" id = "mxTable" name = "mxTable">
<input type="hidden" name="domainName" value="${domainName }"/>
<INPUT type="hidden" name="mxRecord1" />
<INPUT type="hidden" name="mxContent1" />
<INPUT type="hidden" name="mxPrio1" />
<INPUT type="hidden" name="mxTtl1" />
<TR>
<TD> 邮件交换记录 (MX)(最多允许20条) </TD>
<TD> 目标主机</TD>
<TD> 优先级</TD>
<TD> TTL </TD>
<TD> 操作</TD>
</TR>
<c:forEach items= "${listMx}" var = "objMx" varStatus="status">
<TR>
<TD>${objMx[0]}</TD>
<TD>${objMx[1]}</TD>
<TD>${objMx[2]}</TD>
<TD>${objMx[3]}</TD>
<TD><a href='javascript:modRowMx("${objMx[0]}","${objMx[1]}","${objMx[2]}","${objMx[3]}","${status.index+1}");'>修改</a> <a href='javascript:deleteRowMx("${objMx[0]}","${objMx[1]}","${objMx[2]}","${objMx[3]}");'>删除</a></TD>
</TR>
</c:forEach>
</table>
//取得事件所在的tr
function getTR() {
var obj=event.srcElement;
while (obj.tagName !="TR") {
obj = obj.parentElement;
}
return obj;
}
//删除事件所在的行
function onDeleteRow(tableObject,alertMessage){
if (window.confirm(alertMessage)){
var oRow=getTR();
tableObject.deleteRow(oRow.rowIndex);
}
}
[size=medium]
、inserRow()和insertCell()函数
insertRow()函数可以带参数,形式如下:
insertRow(index)
这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。
insertCell()和insertRow的用法相同。
2、动态设置属性和事件
上面行数中的innerHTML和innerText都是列的属性。
这个inner,就是“inner”到<tb></tb>之间,innerText是添加到<tb></tb>之间的文本,innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单,这个解释挺多余的)
设置其他属性也是用同样的方式,比如,设置行背景色
newTr.bgColor = 'red';
设置事件也一样,需要简单说明一点。
比如,我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下:
function newClick(){
alert("这是新添加的行");
}
对onclick事件设置这个函数的代码如下:
newTr.onclick = newClick;
这里需要主义的是,=后面的部分必须是函数名,而且不能带引号,
newTr.onclick = newClick();
newTr.onclick = 'newClick';
newTr.onclick = "newClick";
上面的写法都是错误的。
为什么,其实知道为什么没有什么意思,知道怎么用就OK了,如果不想知道,可以跳过下面这一段。
实际上这个=后面的newClick是指向自己定义的newClick函数的指针,javascript里面函数名就是指向函数的指针,加了引号括号什么的浏览器就找不到那个函数了。
下面的写法,也是正确的
newTr.onclick = function newClick(){
alert("这是新添加的行");
}
这个使用函数名实际上是一样的
[/size]