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;" onclick="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 onclick=\"addRowByID('relation',this);\" style=\"cursor:pointer;\"> 添加 </span><span onclick=\"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 onclick="addRowByID('relation',this);" style="cursor:pointer;"> 添加 </span><span> </span></td></tr>
</table>