jquery 动态添加tab 效果

jquery 动态添加tab 效果,第1张

$("#tab").tabs(".tabContent", {

tabs: "input"

})

试试把这上面的 tabs 功能定义为一个 function

例如

function tabs_run() {

....

}

然後在 click function 里面捕捉 event 完结时侯再次呼叫这个 tabs_run()

例如

$('#add').live('click', function() {

.....

tabs_run()

}

不过我疑惑了,你的 tabContent 没有设置 rel 或者 id… Tabs 是怎样侦测 index 的呢?

点击哪个 <li>会 load 哪个 tabContent 呢?

1、首先输入下方的代码

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>利用jquery给指定的table添加一行、删除一行</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript"

src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>

<script type="text/javascript">

2、然后在输入下方的代码:

////////添加一行、删除一行封装方法///////

/**

* 为table指定行添加一行

*

* tab 表id

* row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行

* trHtml 添加行的html代码

*

*/

function addTr(tab, row, trHtml){

//获取table最后一行 $("#tab tr:last")

//获取table第一行 $("#tab tr").eq(0)

//获取table倒数第二行 $("#tab tr").eq(-2)

var $tr=$("#"+tab+" tr").eq(row)

if($tr.size()==0){

alert("指定的table id或行数不存在!")

return

}

$tr.after(trHtml)

}

3、然后在输入下方的代码:

function delTr(ckb){

//获取选中的复选框,然后循环遍历删除

var ckbs=$("input[name="+ckb+"]:checked")

if(ckbs.size()==0){

alert("要删除指定行,需选中要删除的行!")

return

}

ckbs.each(function(){

$(this).parent().parent().remove()

})

}

/**

* 全选

*

* allCkb 全选复选框的id

* items 复选框的name

*/

function allCheck(allCkb, items){

$("#"+allCkb).click(function(){

$('[name='+items+']:checkbox').attr("checked", this.checked )

})

}

////////添加一行、删除一行测试方法///////

$(function(){

//全选

allCheck("allCkb", "ckb")

})

function addTr2(tab, row){

var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/>

</td><td width='30%'>地理</td><td width='30%'>60</td></tr>"

addTr(tab, row, trHtml)

}

function delTr2(){

delTr('ckb')

}

4、然后输入下方的代码:

</script>

</head>

<body>

<table border="1px #ooo" id="tab" cellpadding="0"

cellspacing="0" width="30%">

<tr align="center">

<td width="30%"><input id="allCkb" type="checkbox"/></td>

<td width="30%">科目</td>

<td width="30%">成绩</td>

</tr>

<tr align="center">

<td width="30%"></td>

<td width="30%">语文</td>

<td width="30%">80</td>

</tr>

</table>

<input type="button" onclick="addTr2('tab', -1)" value="添加">

<input type="button" onclick="delTr2()" value="删除">

</body>

</html>

5、然后这样就完成了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11218956.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存