js动态添加删除表格

//动态添加行
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);
    }
}

、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("这是新添加的行");

｝

这个使用函数名实际上是一样的