Удалить строку таблицы с помощью javascript

Question

У меня есть таблица HTML со вставкой и удалением функциональности строки и ее работа отлично. Но функция удаления работает с кнопкой checkbox + delete.

Когда я хочу удалить строку, сначала я установил флажок, а затем нажмите кнопку удаления. Я хочу сделать это прямо с кнопкой удаления. Ниже мой код,

function deleteRow(tableID) 
{ 
try 
    { 
    var table = document.getElementById(tableID); 
    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) 
       { 
       if (rowCount <= 1) 
        { 
        alert("Cannot delete all the rows."); 
        break; 
        } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
       } 
      } 
     } catch(e) 
      { 
      alert(e); 
    } 
    getValues(); 
} 

<a onclick="deleteRow('dataTable')">Delete Row</a> 

<table id="dataTable"> 
    <tr> 
    <td><input type="checkbox" name="chk"/></td> 
    <td><input type="text" name="Name"></td> 
    </tr> 
</table> 

Примечание: По крайней мере одна строка должна быть там (не удается удалить все строки)

Answer 1

Если вы хотите использовать одну кнопку, годный к употреблению раствор для выбора/отмены выбора строк в удаляться onclick. Таким образом поддерживается также multi select и delete. Например,

http://jsfiddle.net/Nt4wZ/

JS

function selectRow(row) { 
    if (row.className.indexOf("selected") != -1) { 
     row.className = row.className.replace("selected", ""); 
    } else { 
     row.className += " selected"; 
    } 
} 

function deleteRow(tableID) { 
    try { 
     var table = document.getElementById(tableID); 
     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)*/ 

      if (row.getElementsByTagName("input")[0].className.indexOf("selected")!=-1) { 
       if (rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
    } catch (e) { 
     alert(e); 
    } 
    //getValues(); 
} 

HTML

<a onclick="deleteRow('dataTable')">Delete Row</a> 

<table id="dataTable"> 
    <tr> 
     <!-- <td><input type="checkbox" name="chk"/></td> --> 
     <td> 
      <input type="text" name="Name" onclick="selectRow(this)" /> 
     </td> 
    </tr> 
    <tr> 
     <!-- <td><input type="checkbox" name="chk"/></td> --> 
     <td> 
      <input type="text" name="Name" onclick="selectRow(this)" /> 
     </td> 
    </tr> 
</table> 

CSS

input.selected { 
    border-color:lightgreen; 
} 

EDIT- ответ на комментарии

Если вы хотите иметь кнопку Удалить для каждой строки и использования, что вместо этого, вы можете сделать что-то вроде следующего,

http://jsfiddle.net/GRgMb/

html

<table id="dataTable"> 
    <tr> 
     <!-- <td><input type="checkbox" name="chk"/></td> --> 
     <td> 
      <input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" /> 
     </td> 
    </tr> 
    <tr> 
     <!-- <td><input type="checkbox" name="chk"/></td> --> 
     <td> 
      <input type="text" name="Name" /><input type="button" value="delete" onclick="deleteRow('dataTable',this)" /> 
     </td> 
    </tr> 
</table> 

JS

function deleteRow(tableID,currentRow) { 
    try { 
     var table = document.getElementById(tableID); 
     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)*/ 

      if (row==currentRow.parentNode.parentNode) { 
       if (rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 
     } 
    } catch (e) { 
     alert(e); 
    } 
    //getValues(); 
}