admin管理员组文章数量:1516870
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="" 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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
Share Improve this question edited Apr 22, 2013 at 11:53 Panos Bariamis 4,6617 gold badges39 silver badges62 bronze badges asked Apr 22, 2013 at 10:59 Shikhar DeepShikhar Deep 2522 gold badges8 silver badges19 bronze badges2 Answers
Reset to default 1You don't select the checkbox inside td so try this, and this 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);
}
}
}
Using JQuery you could do something similar to this:
In the head section of your html file add this:
<script type="text/javascript" src="//ajax.googleapis./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 deleteBtn once the DOM is fully loaded. You want to add this class to the button.
<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.
本文标签： HTMLJavascripthow to delete the rows of a table which are selected in check boxStack Overflow
版权声明：本文标题：HTML,Javascript-how to delete the rows of a table which are selected in check box - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1744741570a2622638.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论