Solved

Deleting table rows

Posted on 2011-02-10
4
283 Views
Last Modified: 2012-05-11
All I want to do is be able to put a delete row link on each row - it works fine at first, but if you delete an earlier row then try and delete a later one it messes up the counting - thoughts please?

var th_visible = 0;
var rowcount = 1;
var delcount = 0;

filter_added = new Array(); //define filter_added array

function add_filter() {
var the_filter = document.cs_form.filterlist.value;

// check not null
if (the_filter != 0) {

// check for headers row
if (th_visible != 1) {
document.getElementById("cs_headers").style.visibility = "visible";
th_visible = 1;
}

//if (filter_added[the_filter] != 1) {

var x=document.getElementById('cs_table').insertRow(-1);

var a=x.insertCell(0);
var b=x.insertCell(1);
var c=x.insertCell(2);
var d=x.insertCell(3);

a.innerHTML = lists[the_filter][0];
b.innerHTML = lists[the_filter][1];
c.innerHTML = lists[the_filter][2];
d.innerHTML = '<a href="#" onClick="remove_filter('+rowcount+')">X</a>';

rowcount++; //increase row count by 1

filter_added[the_filter] = 1; //set variable to identify filter

//} else { alert("Filter already added!"); } //end if filter already added

} else { alert("Please select a filter from the dropdown box"); } //end if filter not null

} //end add_filter function

function remove_filter(row) {
var x=document.getElementById('cs_table');
x.deleteRow(row-delcount);
delcount++;
return delcount;
             }

Open in new window

0
Comment
Question by:anonwig
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 34867006
Each time you delete a row, the next row take its index. So generaly you don't need to increment a counter to delete the next row.
0
 

Author Comment

by:anonwig
ID: 34867065
How do I access the rows index for putting in the delete link?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34867229
You may use << this >> and << parentNode >> keywords :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	function remove_filter(mylink) {
		document.getElementById('cs_table').getElementsByTagName('tbody')[0].removeChild(mylink.parentNode.parentNode);	
	}
</script>
</head>
<body>
<table border="1" id="cs_table">
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:anonwig
ID: 34867270
Thank you - you genius
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
What is assert.deepEqual? 4 39
Tableau and Javascript: How to export an array to excel with formatting 11 57
Form with Modals 16 42
jQuery not working on ELSE... why? 2 19
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now