jquery實現table根據資料實現增加或者減少“行合併”rowspan
阿新 • • 發佈:2018-12-16
最近實現了一個個人績效計劃的需求,要求實現一個能夠手動增加或者減少行合併的功能
就是填寫一個主考核項,然後有多個子考核項。
下面是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選擇器使用案例
共同進步