jq操作table追加td
Posted lml-lml
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq操作table追加td相关的知识，希望对你有一定的参考价值。
示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
</head>
<style type="text/css">
.well {
font-weight: 600;
position: relative;
height: 22px;
}
.add {
margin-left: 15px;
position: absolute;
cursor: pointer;
}
</style>
<body>
<table style="width:100%;border: 1px solid #ccc;" border="1" cellspacing="0" cellpadding="6" id="table1">
<tr>
<td align="center">1day</td>
<td align="center" class="well">景点 <span class="add">+</span></td>
<td align="center" rowspan="5">小计</td>
</tr>
</table>
</body>
<script>
$(document).ready(function() {
$(".add").click(function() {
$(this).parents('tr').after('<tr><td class="well"></td></tr>'); //1，追加tr
var num = $(this).parent().prev().attr('rowspan') ? $(this).parent().prev().attr('rowspan') : //2，判断第一个td有没有rowspan的属性
$(this).parent().prev().attr('rowspan', num + 1); //左侧的
$(this).parent().next().attr('rowspan', num + 1); //右侧的
})
})
</script>
</html>以上是关于jq操作table追加td的主要内容，如果未能解决你的问题，请参考以下文章