如何勾选后,动态删除该行合并的几条数据(合并行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="72%" height="366" class="box_division_2" id="questionnaireDetailListTab" style="border-top:#1897A0 solid 1px" border="1">
<tr class="boxtr_gray">
<th style="border-left:1px solid #1b979f">序号</th>
<th align="center">题号</th>
<th align="center">问卷题目</th>
<th align="center">问卷答案</th>
<th align="center">答案指向</th>
</tr>
<tr id="questionnaireDetailListTr_1">
<td rowspan="3"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
<td rowspan="3">1111</td>
<td rowspan="3">A</td>
<td>A1</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_1">
<td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
<td style="display:none">1111</td>
<td style="display:none">A</td>
<td>A2</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_1">
<td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
<td style="display:none">1111</td>
<td style="display:none">A</td>
<td>A3</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_2">
<td rowspan="4"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
<td rowspan="4">2222</td>
<td rowspan="4">B</td>
<td>B1</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_2">
<td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
<td style="display:none">2222</td>
<td style="display:none">B</td>
<td>B2</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_2">
<td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
<td style="display:none">2222</td>
<td style="display:none">B</td>
<td>B3</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_2">
<td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
<td style="display:none">2222</td>
<td style="display:none">B</td>
<td>B4</td>
<td>&nbsp;</td>
</tr>
<tr id="questionnaireDetailListTr_3">
<td><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="3" />3</td>
<td>3333</td>
<td>C</td>
<td>C1</td>
<td>&nbsp;</td>
</tr>
</table>
<table width="60%" class="box_division_2" style="border-top:#ffff solid 2px">
<tr class="boxtr_gray">
<td style="border-left:1px solid #1b979f;vertical-align: text-bottom;" align="center" colspan="5">
<input type="button" value="向上" class="btn01" id="verifyButton" onclick="doUp();"></input>
<input type="button" value="向下" class="btn01" id="verifyButton" onclick="doDown();"></input>
<input type="button" value="移除" class="btn01" id="verifyButton" onclick="doDelete();"></input>
</td>
</tr>
</table>
<script>
//移除
function doDelete() {
    var f_questionnaireCheck = document.getElementsByName("questionnaireCheck");
    for(var i = 0; i < f_questionnaireCheck.length; i++){
     if(f_questionnaireCheck[i].checked){
rowIndex = f_questionnaireCheck[i].parentNode.parentNode.sectionRowIndex; 
alert(rowIndex);


objTable= document.getElementById("questionnaireDetailListTab"); 
objTable.deleteRow(rowIndex);  
     }
    }
}
</script>
  
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <table width="72%" height="366" class="box_division_2" id="questionnaireDetailListTab" style="border-top:#1897A0 solid 1px" border="1">
    <tr class="boxtr_gray">
    <th style="border-left:1px solid #1b979f">序号</th>
    <th align="center">题号</th>
    <th align="center">问卷题目</th>
    <th align="center">问卷答案</th>
    <th align="center">答案指向</th>
    </tr>
    <tr id="questionnaireDetailListTr_1">
    <td rowspan="3"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
    <td rowspan="3">1111</td>
    <td rowspan="3">A</td>
    <td>A1</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_1">
    <td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
    <td style="display:none">1111</td>
    <td style="display:none">A</td>
    <td>A2</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_1">
    <td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="1" />1</td>
    <td style="display:none">1111</td>
    <td style="display:none">A</td>
    <td>A3</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_2">
    <td rowspan="4"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
    <td rowspan="4">2222</td>
    <td rowspan="4">B</td>
    <td>B1</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_2">
    <td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
    <td style="display:none">2222</td>
    <td style="display:none">B</td>
    <td>B2</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_2">
    <td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
    <td style="display:none">2222</td>
    <td style="display:none">B</td>
    <td>B3</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_2">
    <td style="display:none"><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="2" />2</td>
    <td style="display:none">2222</td>
    <td style="display:none">B</td>
    <td>B4</td>
    <td>&nbsp;</td>
    </tr>
    <tr id="questionnaireDetailListTr_3">
    <td><input type="checkbox" name="questionnaireCheck" id="questionnaireCheck" value="3" />3</td>
    <td>3333</td>
    <td>C</td>
    <td>C1</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <table width="60%" class="box_division_2" style="border-top:#ffff solid 2px">
    <tr class="boxtr_gray">
    <td style="border-left:1px solid #1b979f;vertical-align: text-bottom;" align="center" colspan="5">
    <input type="button" value="向上" class="btn01" id="verifyButton" onclick="doUp();"></input>
    <input type="button" value="向下" class="btn01" id="verifyButton" onclick="doDown();"></input>
    <input type="button" value="移除" class="btn01" id="verifyButton" onclick="doDelete();"></input>
    </td>
    </tr>
    </table> 
    <script>
    //移除
    function doDelete() {
    var f_questionnaireCheck = document.getElementsByName("questionnaireCheck");
    for(var i = 0; i < f_questionnaireCheck.length; i++){
    if(f_questionnaireCheck[i].checked){
    rowIndex = f_questionnaireCheck[i].parentNode.parentNode.sectionRowIndex;  
    alert(rowIndex);
    objTable= document.getElementById("questionnaireDetailListTab");  
    objTable.deleteRow(rowIndex);   
    }
    }
    }
    </script> 
       
    </body>
    </html>
      

  2.   


    可以不用合并，删除后将内容用innerText获得后然后放入一个tr中即可
    用jquery操作更简单