HTML，Javascript-如何删除在复选框中选中的表格的行
<!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>
上面是我制作的代码，其中表格的第一行是headings.from第二行，表中包含数据。我想删除它在复选框中选择该行，当我向前点击button.but上面的代码是不working.pls帮助HTML，Javascript-如何删除在复选框中选中的表格的行
您不要选择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);
}
}
}
使用jQuery你可以做一些与此类似：
在您的html文件的head部分添加此内容：
<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>
第一个脚本引用在线链接到JQuery库。一旦DOM被完全加载，第二个脚本块将初始化具有类deleteBtn的元素的点击功能。你想把这个类加入到按钮中。
<input type='button' value='Forward' class='deleteBtn' />
该脚本然后找到所有被检查的输入并删除其父母tr。您可能需要充分利用它才能完全适合您的情况。
到chead23：u能请告诉我在哪里，包括您的code.i刚开始学习HTML，CSS和javascript – 2013-04-22 11:24:15
我编辑就像你说的。我包括在头部分的脚本部分，并修改了“按钮”也。但它仍然不working.plus页面需要一些时间load.may是我做错了什么。你可以修改我的第一个代码，并在这里重新加入它。这将是非常有益的。谢谢你 – 2013-04-22 11:40:35
谢谢阿里它的工作。谢谢很多人:) – 2013-04-22 12:09:43