HTML,Javascript-如何删除复选框中选中的表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16145496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML,Javascript-how to delete the rows of a table which are selected in check box
提问by Shikhar Deep
<!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" xml:lang="en" lang="en">
<head>
<title>Ticket Forwarding</title>
</head>
<body style="background-image:url('bg.png')">
<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
<script language="javascript">
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)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e){alert(e);}
}
</script>
<img src="abstergo.jpg">
<p style="color:#8A2BE2;font-family:Lucida Console;font-size:25px;background-
image:url('cell-blue.jpg');margin:0px;width:1800px";> I.T.S->Forwarding & setting
priorities for a ticket </p><br>
<table class="imagetable" id="datatable" style="margin:20px 0px 0px 50px">
<tr>
<th>ID</th>
<th>Subject</th>
<th>Subtopic</th>
<th>Message</th>
<th>Severity</th>
<th>Priority</th>
<th>Status</th>
<th>forward to</th>
<th>checkbox</th>
</tr>
<tr>
<td>1</td><td>login problem</td>
<td>
<select name="helptopic">
<option value="accounts">accounts</option>
<option value="admin issues">admin issues</option>
<option value="it-support" selected>it-support</option>
<option value="project enquiry">project enquiry</option>
<option value="general enquiry">general enquiry</option>
<option value="tech. support">tech. support</option>
<option value="feedback">feedback</option>
<option value="others">others</option>
</select>
</td>
<td>Unable to login</td>
<td>
<select name="severity">
<option>Minor</option>
<option>Normal</option>
<option>Major</option>
<option>Critical</option>
</select>
</td>
<td>
<select name="priority">
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</td>
<td>
<select name="status">
<option>New</option>
<option>Assigned</option>
<option>Resolved</option>
</select>
</td>
<td><input type="text" size="30"></td>
<td><input type="checkbox" name="chk"/></td>
</tr>
</table>
<input type="button" value="Forward" onclick="deleteRow('datatable')" />
</body>
</html>
above is the code which i made.here the first row of the table is headings.from second row onwards the table contains data.i want to delete the row which is selected in check box and when i click on forward button.but the above code is not working.pls help
上面是我制作的代码。这里表格的第一行是标题。从第二行开始，表格包含数据。我想删除在复选框中选中的行，当我点击前进按钮时。但是上面的代码不起作用。请帮助
回答by Mohamed Ali
You don't select the checkbox inside td so try this, and this jsfiddle:
你没有选择 td 里面的复选框，所以试试这个，这个jsfiddle：
function deleteRow(tableID) {
var table = document.getElementById(tableID).tBodies[0];
var rowCount = table.rows.length;
// var i=1 to start after header
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
// index of td contain checkbox is 8
var chkbox = row.cells[8].getElementsByTagName('input')[0];
if('checkbox' == chkbox.type && true == chkbox.checked) {
table.deleteRow(i);
}
}
}
回答by chead23
Using JQuery you could do something similar to this:
使用 JQuery 你可以做类似的事情：
In the headsection of your html file add this:
在head您的 html 文件部分添加以下内容：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.deleteBtn').click(function(){
$('input:checked').each(function(){
$(this).parent('tr').remove();
});
});
});
</script>
The first script reference links to the JQuery library on-line. The second script block initialises a click function on the element with the class deleteBtnonce the DOM is fully loaded. You want to add this class to the button.
第一个脚本参考链接到在线 JQuery 库。deleteBtn一旦 DOM 完全加载，第二个脚本块使用类初始化元素上的点击函数。您想将此类添加到按钮中。
<input type='button' value='Forward' class='deleteBtn' />
The script then finds all inputs that are checked and remove their parent tr. You may need to play around with it to get it working exactly for your scenario.
然后，脚本查找所有已检查的输入并删除其父级tr。您可能需要使用它来让它完全适合您的场景。
