版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wobuaizhi/article/details/83243465
最近实现了一个个人绩效计划的需求,要求实现一个能够手动增加或者减少行合并的功能
就是填写一个主考核项,然后有多个子考核项。
下面是html和js部分代码
<table id="first0" cellspacing="0" border="1" class="valueTable">
<tr>
<td width="50px"></td>
<td >评价项</td>
<td >评价项权重(%)</td>
<td >评价指标</td>
<td >评价指标权重(%)</td>
<td >操作</td>
</tr>
<tr id='firstTR'>
<td rowspan="1" width="50px">1</td>
<td rowspan="1" ><textarea name="PJX"></textarea></td>
<td rowspan="1" ><textarea style='text-align: center;' name="PJXWeight"></textarea></td>
<td><textarea name="PJXIndicator"></textarea></td>
<td><textarea style='text-align: center;' name="PJXIndicatorWeight"></textarea></td>
<td width="100px" >
<button id="deleteRow" onClick="deleteRow(this)">删除</button>
<button id="addRow"onClick="addRow(this)">添加</button>
</td>
</tr>
</table>
var PJX = 1;//起始绩效评价项
//增加div
function addPJX() {
PJX += 1;
var addContent = "<div>"
+ "<table id='first" + PJX + "' cellspacing='0' class='valueTable' border='1' style='border:1px solid #e5ebe9'>"
+ "<tr id='firstTR' style='border:1px solid #e5ebe9;border-top: 1px solid #fff;text-align: center;color: #656c6b;font-size:12px'>"
+ "<td rowspan='1' width='50px' >" + PJX + "</td>"
+ "<td rowspan='1' style='padding: 2px;'><textarea name='PJX'></textarea></td>"
+ "<td rowspan='1' style='padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXWeight'></textarea></td>"
+ "<td style='padding: 2px;'><textarea name='PJXIndicator'></textarea></td>"
+ "<td style='padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXIndicatorWeight'></textarea></td>"
+ "<td width='100px'><button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='deleteRow' onClick='deleteRow(this)'>"
+ "删除</button> <button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='addRow' onClick='addRow(this)'>添加</button></td>"
+ "</tr>"
+ "</table>"
+ "</div>";
var divs = $("#topdiv").children();
//拼接的位置
var addWhere = divs[divs.length - 1];
$(addWhere).append(addContent);
}
//增加tr
function addRow(param) {
var tds = $(param).parents("tr").children("td");
//先增加合并行数
var span = tds[0];
var spannum = $(span).attr('rowspan');
var tmpNum = parseInt(spannum);
for (var i=0; i<3; i++) {
span = tds[i];
$(span).attr('rowspan', tmpNum + 1);
}
//增加子项内容
var table = $(param).parents("table");
//找到要扩充内容的地方
var addContentHtml = "<tr style='border:1px solid #e5ebe9'>"
+ "<td style='padding: 2px;'><textarea name='PJXIndicator'></textarea></td>"
+ "<td style='padding: 2px;'><textarea style='text-align: center;' name='PJXIndicatorWeight'></textarea></td>"
+ "<td><button id='deleteRow' onClick='deleteRow(this)'>删除</button></td>"
+ "</tr>";
$(table).append(addContentHtml);
}
//删除tr
function deleteRow(param) {
var ptr = $(param).parents("tr");
var trId = $(ptr[0]).attr("id");
var tds = ptr.children("td");
//先减少合并行数
var span = tds[0];
var spannum = $(span).attr('rowspan');
//如果删除的不是第一行,那么没有rowspan属性
if (!spannum) {
var firstTable = $(param).parents("table")[0];
var tableId = $(firstTable).attr("id");
//只身下第一个div的最后一行,不允许删除
if ("first0" == tableId) {
var firstTR = $(firstTable).find("tr")[1];
} else {
var firstTR = $(firstTable).find("tr")[0];
}
tds = $(firstTR).children("td");
span = tds[0];
spannum = $(span).attr('rowspan');
}
var tmpNum = parseInt(spannum);
if (tmpNum > 1) {//只剩下最后一行,不删除行,删除table
if (trId) {
return;
}
for (var i=0; i<3; i++) {
span = tds[i];
$(span).attr('rowspan', tmpNum - 1);
}
//button>td>tr
$(param).parent().parent().remove();
} else {
var table = $(param).parents("table");
var tableId = $(table).attr("id");
//只身下第一个div的最后一行,不允许删除
if ("first0" == tableId) {
} else {
$(table).remove();
PJX = PJX - 1;
}
}
}
主要是通过之前说过的jquery获取对象然后进行append。
根据上面的代码可以实现table合并行的增加和减少。
说一下主要的代码部分
for (var i=0; i<3; i++) {
span = tds[i];
$(span).attr('rowspan', tmpNum - 1);
}
这里拿到td的rowspan属性,然后加1或者减1。
这个是实现的关键。
其他的部分可以自己看看
获取数据的方法和之前写过的文章类似。有兴趣可以看一下jquery选择器使用案例
共同进步