jquery 动态表格

bestwinner

浏览: 19377 次
性别:
来自: 黄冈

最近访客更多访客>>

勇敢面对okk

996627445

Samxuewenming

傳古風

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery Apache XHTML HTML

commons-lang-src下载

http://archive.apache.org/dist/commons/lang/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
$(document).ready(function(){
$("#but").click(function(){
/*
var $table=$("#tab tr");
var len=$table.length;
// alert("tr length :"+len);
// alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");

$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");
*/
$("#tab").append("<tr><td>11</td><td>aa</td> <td>bb</td></tr>");
})
})

function deltr(index)
{
// alert("tr[id=\'"+index+"\']");
$table=$("#tab tr");
if(index>$table.length)
return;
else
{
$("tr[id=\'"+index+"\']").remove();
//$("tr:gt('"+index+"')").each
for(var temp=index+1;temp<=$table.length;temp++)
{
//$("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
$("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除</a></td></tr>");
}
}
}

</script>
</head>

<body>
<br/>
<table id="tab" border="1" width="60%" align="center">
<tr>
    <td width="20%" align="center">序号</td>
      <td align="center">标题</td>
        <td align="center">操作</td>
</tr>
<div id="ajaxtest">
</div>
</table>
<br/>
<div style="border:2px; border-color:#00CC00; margin-left:20%">
<input type="button" id="but" value="add"/>
</div>
</body>
</html>
////////////2012

(function($){$.extend({treetable:new function(){this.defaults={id_col:0,parent_col:1,handle_col:2,order_col:-1,open_img:"images/minus.gif",close_img:"images/plus.gif"};function trim(str){return str.replace(/(^[\s\xA0]*)|([\s\xA0]*$)/g,"");}this.construct=function(settings){if(this.size()!=1)return;if(this[0].tagName.toUpperCase()!="TBODY")return;var config=$.extend({},$.treetable.defaults,settings);if(config.id_col==null||config.parent_col==null||config.handle_col==null)return;var $this=$(this);var tr_arr=new Array();var tr_sort=new Array();$this.find("tr").each(function(){var id=$.trim($(this).find("td:eq("+config.id_col+")").text());var parent=$.trim($(this).find("td:eq("+config.parent_col+")").text());tr_arr.push({'id':id,'parent':parent,'level':0,'node':'leaf','expanded':true,'obj':$(this)});});var len=tr_arr.length;var level=0;while(len>0){for(var i=0;i<tr_arr.length;i++){var o=tr_arr[i];if(o==null)continue;if(o.parent==""){tr_sort.push(o);tr_arr[i]=null;len=len-1;}else{for(var j=0;j<tr_sort.length;j++){if(tr_sort[j].id==o.parent){o.level=tr_sort[j].level+1;tr_sort[j].node='node';tr_sort.splice(j+1,0,o);tr_arr[i]=null;len=len-1;break;}}}}level=level+1;}var fn_click=function(){var id=trim($(this).parent().parent().find("td:eq("+config.id_col+")").text());var v=-1;for(var j=0;j<tr_sort.length;j++){var o=tr_sort[j];if(o.id==id){if(o.node=='leaf')return;v=o.level;var img=o.obj.find("td:eq("+config.handle_col+") img")[0];if(!o.expanded){img.src=config.open_img;o.expanded=true;}else{img.src=config.close_img;o.expanded=false;}var show=o.expanded;var f=false;var tmp=0;for(var i=j+1;i<tr_sort.length;i++){o=tr_sort[i];var img=o.obj.find("td:eq("+config.handle_col+") img")[0];var t=!o.expanded;if(o.level>v&&show){if(!f&&!t){o.obj.show();}else if(!f&&t){tmp=o.level;f=true;o.obj.show();}else if(f&&o.level<=tmp){if(!t){f=false;}else{tmp=o.level;}o.obj.show();}else{;}}else if(o.level>v&&!show){o.obj.hide();}else if(o.level<=v){break;}}break;}}}for(var j=tr_sort.length-1;j>-1;j--){var o=tr_sort[j];var img=$("<img src='"+config.open_img+"'>");img.click(fn_click);var tr=o.obj.find("td:eq("+config.handle_col+")");tr.prepend(" ");tr.prepend(img);var s=new Array((o.level+1)*5).join(" ");tr.prepend(s);$this.prepend(o.obj);}}}});$.fn.extend({treetable:$.treetable.construct});})(jQuery);