Удаление нескольких строк Строки + с rowspan

Я хотел бы удалить выбранные строки с rowspan и еще один ниже, в общей сложности 4 строки, вы можете видеть, что каждый 4 стека строк представляют 1 запись. Функция deleteSelectedRows() ниже работает неправильно; он удаляет только один выбранный. Не могли бы вы помочь?Удаление нескольких строк Строки + с rowspan

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
<table id="my_table" id="my_table" align="center" width="100%" border="1" cellpadding="0" cellspacing="0"> 
    <tbody> 
    <thead> 
     <tr> 
     <th >No</th> 
     <th >Location</th> 
     <th >Time</th> 
     </tr> 
     <tr> <!-- new entry #1 --> 
     <td rowspan="3"><input type="checkbox">1a<td> 
     <td>1a</td> 
     </tr> 
     <tr> 
     <td>2a</td> 
     <td>2a</td> 
     </tr> 
     <tr> 
     <td>3a</td> 
     <td>3a</td> 
     </tr> 
     <tr > 
     <td colSpan="3">4a</td> 
     </tr> 
     <tr> <!-- new entry #2--> 
     <td rowspan="3"><input type="checkbox">1b<td> 
     <td>1b</td> 
     </tr> 
     <tr> 
     <td>2b</td> 
     <td>2b</td> 
     </tr> 
     <tr> 
     <td>3b</td> 
     <td>3b</td> 
     </tr> 
     <tr > 
     <td colSpan="3">4b</td> 
     </tr> 
    </thead></tbody> 
    </table> 
    <div><input type="button" value="Delete selected rows" onClick="deleteSelectedRows()"/></div> 
</body> 
</HTML> 
    <SCRIPT language="javascript"> 
    function deleteSelectedRows() {  
    var table = document.getElementById('my_table'); //html table 
    var rowCount = table.rows.length; //no. of rows in table   
    for(var i=0; i< rowCount; i++) { //loops for all row in table 

     var row = table.rows[i]; //return a particular row    
     var chkbox = row.cells[0].childNodes[0]; //get check box onject    
     if(null != chkbox && true == chkbox.checked) { //wheather check box is selected     
     table.deleteRow(i); //delete the selected row 

     rowCount = rowCount-1; //decrease rowcount by 1     
     i--;    
     }    
    } 
    } 
</script>

источник

2013-03-18 Samir Alrifai

К сожалению, я пропустил возможность того, что несколько ящиков могут быть проверены с моим первым ответом. Обновлено для моего собственного удовлетворения, я вижу, что вы уже приняли ответ :-) – andyb

Спасибо за вашу помощь! –

Ваша проблема заключается в удалении одной строки, но из-за ваш rowspan=3 ваш ряд представлен 3 строк. Поэтому вы должны удалить столько строк, сколько значение rowspan (+1 для четвертого). Пример:

function deleteSelectedRows() {  
var table = document.getElementById('my_table'); 
var rowCount = table.rows.length;   
for(var i=0; i< rowCount; i++) { 

    var row = table.rows[i];    
    var chkbox = row.cells[0].childNodes[0];    
    if(null != chkbox && true == chkbox.checked) { 
    nbRows = row.cells[0].rowSpan + 1; // the number of row to delete 
    for(var j=0; j<nbRows; j++) {  
    table.deleteRow(i); //delete the selected rows 
    rowCount--; 
    } 
    i--;    
    }    
} 
}

источник

2013-03-18 21:48:24 Pith

Спасибо, отлично поработал! –

Представленный HTML содержит некоторые незначительные ошибки проверки, которые я исправил ниже. Это было то, что <thead> не охватывает весь ваш стол и определенно не существует после<tbody>. Также есть дубликат id на <table>. Для действительного порядка элементов таблицы см. documentation.

Проблема была в том, что код когда-либо удалял только одну строку, которая соответствовала установленному флажку. Затем rowCount уменьшится на 1 (от 9 до 8), но логика для удаления строки по-прежнему зависит от найденного флажка, но это никогда не будет истинным снова, поскольку вы просто удалили эту строку!

Обновленный JavaScript сначала обнаруживает rowIndex, как вы уже это сделали, но теперь вырывается, а затем использует этот индекс в качестве начальной позиции для повторного итерационного удаления 4 строк.

Редактировать: Обновленный JavaScript работает в обратном порядке, избегая приращения и уменьшения и теперь работает при проверке нескольких входов. Извините, я пропустил возможность того, что несколько ящиков могут быть проверены с моим первым ответом!

See demo или код ниже.

HTML (ныне действует)

<table id="my_table" align="center" width="100%" border="1" cellpadding="0" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>No</th> 
     <th>Location</th> 
     <th>Time</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> <!-- new entry #1 --> 
     <td rowspan="3"><input type="checkbox"/>1a</td> 
     <td>1a</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>2a</td> 
     <td>2a</td> 
    </tr> 
    <tr> 
     <td>3a</td> 
     <td>3a</td> 
    </tr> 
    <tr> 
     <td colSpan="3">4a</td> 
    </tr> 
    <tr> <!-- new entry #2--> 
     <td rowspan="3"><input type="checkbox"/>1b</td> 
     <td>1b</td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>2b</td> 
     <td>2b</td> 
    </tr> 
    <tr> 
     <td>3b</td> 
     <td>3b</td> 
    </tr> 
    <tr> 
     <td colSpan="3">4b</td> 
    </tr> 
    </tbody> 
</table> 
<div><input type="button" value="Delete selected rows" onClick="deleteSelectedRows()"/></div>

JavaScript

function deleteSelectedRows() {  
    var table = document.getElementById('my_table'); //html table 

    for (var rowIndex = table.rows.length - 1; rowIndex >= 0; rowIndex--) { //loops for all row in table 
    var row = table.rows[rowIndex]; //return a particular row    
    var chkbox = row.cells[0].childNodes[0]; //get check box object    

    if (null != chkbox && true == chkbox.checked) { //wheather check box is selected 
     // rowIndex = row with checkbox on 
     for (var i = rowIndex + 3; i >= rowIndex; i--) { 
     table.deleteRow(i); //delete the selected row 
     } 
    } 
    } 
}

источник

2013-03-18 21:50:08 andyb

Отлично, спасибо –

Удаление нескольких строк Строки + с rowspan

ответ

Смежные вопросы