js（jquery）+表格行增加删除操作

1.js方法

<table width="640" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" id="tab">
  <tr style="font-weight:bold; font-size:14px" >
    <td width="77" height="30" align="center" valign="middle" bgcolor="#FFCCCC">序号</td>
    <td width="366" align="center" valign="middle" bgcolor="#FFCCCC">用途(项目)</td>
 <td width="108" align="center" valign="middle" bgcolor="#FFCCCC">金额(单位：元)</td>
    <td width="84" align="center" valign="middle" bgcolor="#FFCCCC">完成日期</td>
 <td align="center" valign="middle" bgcolor="#FFCCCC" width="40" >操作</td>
  </tr>

<tr bgcolor="#fd6b6c"><td colspan=5 height="30"><div style="float:left;margin-left:10px;"><img src="images/add.gif" style="cursor:pointer;" οnclick="addTr()"/></div><div style="float:right;color:#fff;font-weight:bold;font-size:14px;padding-top:5px;line-height:20px;" >余额:<span id="leaveMoney</span></div></td></tr>
  </table>

 

<script>
var programeinput;
var moneyinput ;
var dayinput ;
var delinput;
function addTr()
{

getNum();
var t = document.getElementById("tab"); //首先获得这个表格
var tr = t.insertRow(t.rows.length-1); //为该表格添加行，参数为0代表添加到第一行
if(t.rows.length%2==0)
tr.style.cssText='background:#fff7d7;';
var td = tr.insertCell(0); //添加一列
if(navigator.appName.indexOf("Explorer") > -1){
td.innerText =t.rows.length-2 ;
} else{
td.textContent =t.rows.length-2 ;
}
td.setAttribute("style","text-align:center;");
td.style.cssText='text-align:center;'
programeinput = document.createElement("input");
programeinput.setAttribute("type","text");
programeinput.setAttribute("size","50");
programeinput.setAttribute("height","26");
programeinput.setAttribute("name","programe");
programeinput.setAttribute("id","programe");//必须设置id属性否则获取不到该创建对象
programeinput.setAttribute("maxlength","50");
programeinput.setAttribute("onkeyup",newquanjiao(programeinput));
programeinput.style.cssText='font-size:14px;line-height:24px;';
td = tr.insertCell(1); //添加一列
td.appendChild(programeinput);
moneyinput = document.createElement("input");
moneyinput.setAttribute("type","text");  
moneyinput.setAttribute("name","money");
moneyinput.setAttribute("id","money");
moneyinput.setAttribute("size","14");
moneyinput.setAttribute("height","26");
moneyinput.style.cssText='font-size:14px;line-height:24px;';
moneyinput.attachEvent("onkeyup",newclearNoNum(moneyinput));
moneyinput.attachEvent("onblur",getNum);
td = tr.insertCell(2);
td.appendChild(moneyinput); 
dayinput = document.createElement("input");
dayinput.setAttribute("type","text");  
dayinput.setAttribute("name","day");
dayinput.setAttribute("id","day");
dayinput.setAttribute("size","10");
dayinput.setAttribute("height","26");
dayinput.setAttribute("readonly","true");
dayinput.setAttribute("maxlength","10");
dayinput.style.cssText='font-size:14px;line-height:24px;';
dayinput.attachEvent("onclick",newshowCal(dayinput));
td = tr.insertCell(3);
td.appendChild(dayinput);
delinput = document.createElement("input");
delinput.setAttribute("type","button");  
delinput.setAttribute("value","删除");
delinput.setAttribute("name","del");
delinput.setAttribute("id","del");
delinput.style.cssText='font-size:14px;line-height:24px;';
delinput.attachEvent("onclick",newremoveRow(delinput))
td = tr.insertCell(4);
td.appendChild(delinput);
}

var newshowCal = function(obj)
{
  return function()
  {
    showCal(obj);//该函数为外部定义的一个执行函数；
  }
}

function showCal(obj)
 {
        if (!obj) var obj = event.srcElement;
        var obDate;
  if ( obj.value == "" ) {
                obDate = new Date();
        } else {
                var obList = obj.value.split( "-" );
                obDate = new Date( obList[0], obList[1]-1, obList[2] );
        }

        var retVal = showModalDialog( "calendar/calendar.htm", obDate,
                "dialogWidth=206px; dialogHeight=206px; help=no; scroll=no; status=no; " );

        if ( typeof(retVal) != "undefined" ) {
                var year = retVal.getFullYear();
                var month = retVal.getMonth()+1;
                var day = retVal.getDate();
                obj.value =year + "-" + month + "-" + day;
        }
 }

function clearNoNum(obj)
 {
  //先把非数字的都替换掉，除了数字和.
  obj.value = obj.value.replace(/[^/d.]/g,"");
  //必须保证第一个为数字而不是.
  obj.value = obj.value.replace(/^/./g,"");
  //保证只有出现一个.而没有多个.
  obj.value = obj.value.replace(//.{2,}/g,".");
  //保证.只出现一次，而不能出现两次以上
  obj.value = obj.value.replace(".","$#$").replace(//./g,"").replace("$#$",".");
  quanjiao(obj);
 }
var newclearNoNum = function(obj)
{
  return function()
  {
    clearNoNum(obj);//该函数为外部定义的一个执行函数；
  }
}
function quanjiao(obj)
{
    var str=obj.value;
    if (str.length>0)
    {
        for (var i = str.length-1; i >= 0; i--)
        {
            unicode=str.charCodeAt(i);
            if (unicode>65280 && unicode<65375)
            {
                alert("不能输入全角字符，请输入半角字符");
                obj.value=str.substr(0,i);
            }
        }
    }
}
var newquanjiao = function(obj){
return function(){
quanjiao(obj);
}
}
var Moneys = document.getElementsByName("money");
var Programes = document.getElementsByName("programe");
var Days = document.getElementsByName("day");
function getNum(){
var total=0;
if(Moneys)
 {
 for(var i=0;i<Moneys.length;i++){
  if(Moneys[i].value!=""){
  total+=parseInt(Moneys[i].value);
  }}

 }

}

function removeRow(r)
{
var root = r.parentNode;
root.removeChild(r);
}
var newremoveRow = function(obj){
return function(){
removeRow(obj.parentNode.parentNode);
}
}

2.jquery 方法

 function addRowByID(type,addtrs){
                //取得当前行的TR 
               var $addtr=addtrs.parentElement.parentElement; 
               //取得TR索引，从0为表的第一行 
               var addindex=$addtr.rowIndex;
               //获取当前行
               var addcurrentRow=$('#content:first tr:eq('+addindex+')');
               //要添加的行的id
               switch(type)
               {
               case 'relation':   str = "<tr class=\"line-even\"><td><input type=text style=\"width:80px;\" name=\"call\" /></td><td><input type=text style=\"width:80px;\" name=\"callname\" /></td><td><input type=text name=\"callage\" style=\"width:80px;\"/></td><td><input type=text name=\"calldegree\" style=\"width:90px;\"/></td><td><input type=text name=\"callpolitical\" style=\"width:80px;\"/></td><td colspan=2><input type=text name=\"callcompany\" style=\"width:140px;\"  /><span οnclick=\"addRowByID('relation',this);\" style=\"cursor:pointer;\">&nbsp;&nbsp;添加&nbsp;&nbsp;</span><span οnclick=\"delRowByID(this);\" style=\"cursor:pointer;\">删除</span></td></tr>";
                                  break;

          default:return;
               }
                //当前行之后插入一行
               addcurrentRow.after(str);
   }
   function delRowByID(deltrs){
                //取得当前行的TR 
               var $deltr=deltrs.parentElement.parentElement; 
               //取得TR索引，从0为表的第一行 
               var delindex=$deltr.rowIndex;
               $("#content")[0].deleteRow(delindex);
   }

<table class="content-table" width="100%" border="0" id="content">

  <tr class="line-even"><td style="height:30px;"><input type=text name="call" style="width:80px;"/></td><td><input type=text style="width:80px;" name="callname" /></td><td><input type=text name="callage" style="width:80px;"/></td><td><input type=text name="calldegree" style="width:90px;"/></td><td><input type=text name="callpolitical" style="width:80px;"/></td><td colspan=2><input type=text name="callcompany" style="width:140px;"  /><span οnclick="addRowByID('relation',this);" style="cursor:pointer;">&nbsp;&nbsp;添加&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td></tr>

</table>