////在table的第二行的位置添加一行：
var tbl_elm = $("#dgList")
$('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1))
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)
var tds = $("#dgList .TableHeader1").find('td')
tds[6].setAttribute("colSpan", "2")
还可以写成：tds[6].attr("rowSpan", 2)
这种格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove()
////juqery 读取table第N行第M列
$("#dgList").find("tr").eq(N).find("td").eq(M)
////合并一行中除个别单元格之外的所有单元格
$("#dgList tr:eq(0) td").each(function () {
if ($(this).text() != '租赁资源' &&$(this).text() != '用地规范') {
$(this).attr("rowspan", "2")
}
})
////指定行插入指定行后面
$('<tr><td>租赁资源</td><td>用地规范</td></tr>').insertAfter($("#dgList tr:eq(0)"))
比如设置table的id为tabvar
trHTML
=
"..."
$("#tab").append(trHTML)//在table最后面添加一行
$("#tab
tr:eq(2)").after(trHTML)
//
在table的第3行后面添加一行
这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var
trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function()
{
$(":button").click(function()
{
var
tr
=
"new"
//$("table").append(tr)
$("table
tr:eq(2)").after(tr)
})
})
这是我测试用的代码，你可以运行看看
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
<style type="text/css">
.container {
width: 99.6%
height: 99%
position: absolute
top: 0.5%
left: 0.2%
overflow: auto
border: 1px outset #d0efe5
border-radius: 5px
-moz-border-radius: 5px
-wekit-border-radius: 5px
background: #F5F5F5
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
}
.toolbar {
width: 99.6%
height: 40px
padding: 10px
}
.button, .button:visited {
background-color: #2981e4
display: inline-block
padding: 5px 10px 6px
color: #fff
font-size: 13px
font-weight: bold
line-height: 1
text-decoration: none
-moz-border-radius: 6px
-webkit-border-radius: 6px
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6)
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6)
text-shadow: 0 -1px 1px rgba(0,0,0,0.25)
border-bottom: 1px solid rgba(0,0,0,0.25)
position: relative
cursor: pointer
}
.button:hover {
background-color: #2575cf
color: #fff
}
.button:active {
top: 1px
}
.table {
width: 600px
border: solid #add9c0
border-width: 1px 0px 0px 1px
}
.table th, td {
line-height: 30px
border: solid #add9c0
border-width: 0px 1px 1px 0px
}
.table tr {
width: 100%
margin: 0 auto
border: none
overflow: hidden
color: #2981e4
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
.center {
text-align: center
}
.table input[type='text'] {
width: 120px
color: #333
padding: 4px 5px
border: 1px solid #e0ecff
border-radius: 2px
-o-border-radius: 2px
-moz-border-radius: 2px
-wekit-border-radius: 2px
box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-o-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
behavior: url(/PIE.htc)
}
.table input[type='text']:focus, .table input[type='text']:hover {
border: 1px solid #3aa2d0
outline: none
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
<a class="button" id="btnNew"> 新 增 </a>
<a class="button" id="btnGet"> 取 值 </a>
</div>
<table class="table center" id="userTable">
<tr>
<th>用户账户</th>
<th>角色名称</th>
<th>有效期</th>
</tr>
<tr>
<td>
<input type='text' name='account' value="Jerry">
</td>
<td>
<input type='text' name='role' value="系统管理员">
</td>
<td>
<input type='text' name='period' value="2016-12-31">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var newRow = "<tr class='new'><td><input type='text' name='account'></td><td><input type='text' name='role'></td><td><input type='text' name='period'></td></tr>"
$("#btnNew").click(function() {
$("#userTable").append(newRow)
})
$("#btnGet").click(function() {
var datas = new Array()
$("#userTable").find("tr.new").each(function(){
datas.push({
"account" : $(this).find("input[name='account']").val(),
"role" : $(this).find("input[name='role']").val(),
"period" : $(this).find("input[name='period']").val()
})
})
alert(JSON.stringify(datas))
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）