jquery table 增加一行

xiaojin21cen

浏览: 98111 次
性别:
来自: 北京

最近访客更多访客>>

liukp981

arthorwei

loadsave

heyongkui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

table 增加一行，并动态改变增加行中的各控件的属性的值

<!DOCTYPE html public "-//w3c//dtd html 4.0 transitional//EN">
<html>
 <head>
  <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-store">
    <meta http-equiv="expires" content="0">    
     <script src="jquery-1.7.js" type="text/javascript"></script>
 </head>

 <body>
    <table id="table6" cellpadding="0" cellspacing="0" border="1"
			width="90%" align="center"
			onkeydown="if(event.keyCode==13)event.keyCode=9">
			<tr>
				<td colspan="3" class="tab">
					<table class="tabs" cellpadding="0" cellspacing="0">
						<tr>
							<td class=tab_sf></td>
							<td class=tab_f>
								附件
							</td>
							<td class=tab_ef></td>
							<td class=tab_ef align="right">
								<input type="button" class="button" onclick="addTable('6')"
									value="增加">
							</td>
						</tr>
					</table>
				</td>
			</tr>

			<tr>
				<th width="40%">
					文件名称
				</th>
				<th width="30%">
					上传时间
				</th>
				<th>
					操作
				</th>
			</tr>			
			<tr id='tr6'>
                <td id="td1" align='center'>
                文件名称<span id="sp" ><span>
				</td>
				<td id="td2" align='center'>
					<input type='text' name='name'  value="td"  onmouseover="aaahow(this)" />

				</td>
				<td id="td3" >
					<a onclick="deleteTable0(this)" style="cursor: hand">删除</a>
				</td>
			</tr>

		</table>



 </body>
</html>



<script language="JavaScript">
<!--
var $tr6 = $("#tr6").remove();
var ii=0;

//动态的改变id，value等属性的值
function addTable(obj) {
	ii++;
    //$tr6.find("#dd").html("aaaaaa").end().clone().appendTo("#table6");		
    //alert(ii);
    var  vv="td"+ii;
    $tr6.find("#td2 input").val(vv).attr("id",vv).end().clone().appendTo("#table6");	
    name();
}

//对span中的内容动态的改变
function  name(){
    var i=0;
    $("span[id='sp']").each(function(){
        i++;      
        $(this).html(i);
    });
}

function deleteTable0(obj) {
	$(obj.parentNode.parentNode).remove(); // 删除当前节点的父节点的父节点
    name();
}


function aaahow(obj){
    $(obj).attr("title","value:"+obj.value+"     \n\nid:"+obj.id+"\n\n");
    //alert("value:"+obj.value+"  id:"+obj.id);
}

//-->
</script>