摘要:动态加减table、同时里面动态加减tr
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="post.php" method="POST">
<div class="form-group col-md-10 container">
<table class="table table-bordered">
<caption style="text-align: center;"><strong>OKR</strong><a class="btn btn-info btn-xs" onclick="add_big_table(this)" title="Add">[+]</a>
</caption>
<thead>
<tr class="danger">
<th>Objective</th>
<th>Percent(%)</th>
<th>Self-Score</th>
<th>Self-Remark</th>
<th> Score</th>
<th> Remark</th>
<th> ADD/DEL</th>
</tr>
</thead>
<tbody id='ini_t_body'>
<tr class="info">
<td><b><input type="text" class="form-control" name="obj_name[0][]" value="Manager Review" readonly="true"></b></td>
<td><b><input type="text" class="form-control" name="percent[0][]" value="20" readonly="true"></b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a class="btn btn-info btn-xs" onclick="add_split_table(this)" title="Add">[+]</a>
</td>
</tr>
<tr>
<td><textarea type='text' class="form-control" name="okr_content[0][]"></textarea></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var e_okr_num = 0;
function add_split_table(obj){
var table_html = ' <tr>\n'
+ ' <td><textarea type=\'text\' class="form-control" name="okr_content['+ e_okr_num + '][]"></textarea></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td>\n'
+ ' <a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>\n'
+ ' </td>\n'
+ ' </tr>';
$(obj).parent().parent().parent().append(table_html);
}
function del_split_table(obj){
$(obj).parent().parent().remove();
}
function add_big_table(obj){
e_okr_num++;
var html=' <tbody id=\'ini_t_body\'>\n'
+ ' <tr class="info">\n'
+ ' <td><b><input type="text" class="form-control" value="" name="obj_name['+ e_okr_num + '][]"></b></td>\n'
+ ' <td><b><input type="text" class="form-control" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,\'\');}).call(this)" maxlength="5" name="percent['+ e_okr_num + '][]"></b></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td>\n'
+ ' \t\t<a class="btn btn-info btn-xs" onclick="add_split_table(this)" title="Add">[+]</a>\n'
+ ' \t\t<a class="btn btn-danger btn-xs" onclick="del_big_table(this)" title="Delete">[x]</a>\t</td>\n'
+ ' </tr>\n'
+ ' <tr>\n'
+ ' <td><textarea type=\'text\' class="form-control" name="okr_content['+ e_okr_num + '][]"></textarea></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td></td>\n'
+ ' <td>\n'
+ ' \t\t<a class="btn btn-danger btn-xs" onclick="del_split_table(this)" title="Delete">[x]</a>\n'
+ ' </td>\n'
+ ' </tr>\n'
+ ' </tbody>';
$('tbody:last').after(html);
}
function del_big_table(obj){
$(obj).parent().parent().parent().remove();
}
</script>
<input type="submit">