SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved : Identifying the TD That Specific Text Resides In

    I am attempting to create a link (actually just a span) inside a table cell that will cause the entire row to be deleted. I've come across many examples where I can effect this by identifying the rowIndex of a particular TD when it is clicked on and then use deleteRow to delete the row.

    The problem with this is that the TD itself requires the onClick event such as :
    <td onclick="alert(this.parentNode.rowIndex);">Click to see the rowIndex</td>

    When anything within the TD is clicked, an alert will popup saying what the rowIndex is of the particular TR the TD resides in.

    My problem is that I want to be able to do this ONLY when the text inside my span inside the TD is clicked. I can't make it work.

    Here is an example :
    <td>This is the <span onClick="alert(?????)";>text</span> I want users to click.</td>

    What can I do to that span's onClick property to reference the TD then reference the TR so that I can get the rowIndex?

    Any suggestions??
    Last edited by justbn_me; Sep 12, 2006 at 05:44. Reason: Solved

  2. #2
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is untested, but can you try:
    Code:
    onclick="alert(this.parentNode.parentNode.rowIndex);"
    Regards,
    Jordan

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for responding.

    Unfortunately, that does not work. It comes back as "undefined".

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi justbn_me, it will work, it will just require a little bit of playing around to find the correct position within the DOM.

    Try the following:
    Code:
    onclick="alert(this.parentNode.parentNode.tagName);"
    Keep adding/removing parentNode's until you get to the tag you require, then modify the property to alert to be the rowIndex instead of the tagName.

    Regards,
    Jordan

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jordan has the right idea - walk up the parent chain until you find what you want...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    window.onload = function()
    {
      initTableSpans('t1');
    }
    function initTableSpans(sTblId)
    {
      var i, tbl = document.getElementById(sTblId);
      var spans = tbl.getElementsByTagName('span');
      for (i = 0; i < spans.length; ++i) {
        spans[i].onclick = function() {
          var p = this;
          do {
            p = p.parentNode;
          } while (p.tagName.toLowerCase() != 'tr');
          tbl.deleteRow(p.rowIndex);
        } // end span.onclick
      }
    }
    </script>
    </head>
    <body>
    
    <table id='t1'>
    <tr><td>[td]<span title='Click Me'>[span 1]</span>[td]</td><td>[td]</td></tr>
    <tr><td>[td]<span title='Click Me'>[span 2]</span>[td]</td><td>[td]</td></tr>
    <tr><td>[td]<span title='Click Me'>[span 3]</span>[td]</td><td>[td]</td></tr>
    <tr><td>[td]<span title='Click Me'>[span 4]</span>[td]</td><td>[td]</td></tr>
    </table>
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jordan and Mike,

    Thanks for the assistance. At first, I felt your answers simply wouldn't work for me because my table rows are generated dynamically with AJAX. So, I could not use the "window.onload" event run the initTableSpans script that assigns the onclick properties to the spans.

    Finally, a lightbulb came on. In order for the user to get their mouse over than span in order to click, the TD has to be moved across. So, I added this onmousover event to the TD :

    Code:
    <td colspan="2" class="eventinfo" onmouseover="initTableSpans('TABLENAME HERE')">
    Now, I can add the TR dynamically. When the users mouses over the TD, it instantly processes initTableSpans and applies the onClick property to the text inside the span.

    Thanks so much for your suggestions.

    Justin Noel
    Calendee - The Calendar of Events and Entertainment
    http://www.calendee.com
    Last edited by justbn_me; Sep 12, 2006 at 05:47. Reason: Add Signature

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bad idea. Now initTableSpans() will be called many times.

    When the page receives the callback from the HttpRequest (with the table data) it then uses that data to create the table on the page, right? Well, that is where you need to call initTableSpans() - right after the table has been created.

  8. #8
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike,

    The actual table itself exists prior to the HttpRequest. When the user clicks a link inside a table cell, a new row is added dynamically underneath the current TR.

    That new row is the one that I need to have an onClick event in the span.

    I understand your concern but wasn't sure there was a better way. To minimize the risk of the initTableSpans function being called repeatedly, I actually put the onMouseOver property inside a <P> inside the TD instead of directly on the TD. This way, the user has to move the mouse directly over the text that will cause the row to be deleted. Yes, there is still some chance this might happen repeatedly, but the risk is pretty small. Because my table is very small with few rows and not much interaction, I am fairly comfortable with this.

    If you have a better idea, I would love to hear from you. Here is a sample of my table. In <tr id="tr_og_4">, the user clicked on the link. So, the row <tr id="tr_descr_og_4"> was inserted underneath. Now, to remove this row, the user will click on "Close This Box". The initTableSpans only happens when the mouse moves over the containing paragraph.

    Code:
    <table id="ongoing">
    <tbody>			
    
    	<tr id="tr_og_1">
    		<td class="time"><img src="images/arrow.gif" alt="ongoing"></td>
    		<td><a href="" onclick="get_url('php_respond/description.php?parent_event_id=507&tr=og_1&start_date=ongoing'); return false;">25th ANNIVERSARY EXHIBITION</a></td>
    	</tr>			
    
    	<tr id="tr_og_3">
    		<td class="time"><img src="images/arrow.gif" alt="ongoing"></td>
    		<td><a href="" onclick="get_url('php_respond/description.php?parent_event_id=152&tr=og_3&start_date=ongoing'); return false;">Art Exhibit : Sherry Giryotas</a></td>
    	</tr>			
    
    	<tr id="tr_og_4">
    		<td class="time"><img src="images/arrow.gif" alt="ongoing"></td>
    		<td><a href="" onclick="get_url('php_respond/description.php?parent_event_id=951&tr=og_4&start_date=ongoing'); return false;">Cuba Today! Photo Exhibit</a></td>
    	</tr>			
    
    	<tr id="tr_descr_og_4">
    		<td colspan="2" class="eventinfo">
    			<div id="descr_div_og_4" style="">
    			<h5>Description:</h5>
    			<p></p><p>A photo exhibit featuring the works of Dr. Janiz Minshew-Shurr 
    			features photos from a recent trip to old Havana, Cuba, the heart of 
    			Havana.  She has traveled around the world to photograph the sites 
    			and the people.  Dr. Minshew-Shurr’s photographs have been 
    			published in National Geographic and she has sold photos as a 
    			stock photographer.</p> <p>“Cuba Today!” will be on display Monday thru Friday from 9:00 
    			a.m.-5:00 p.m. and during all performances. </p><p></p>
    
    			<p>( <a href="http://www.ci.garland.tx.us/Home/Departments/Recreation+and+Cultural+Services/Garland+Arts/PA7+Calendar+of+Events_landing.htm">View Website</a> )</p>
    
    			<h5>Location:</h5>
    			<p>The Small Theatre at the Granville Arts Center<br>
    			300 N. Fifth St.<br>
    
    			Garland, TX 75040<br>
    
    			(972) 205-2790 </p>	
    			<p class="closeit" onmouseover="initTableSpans('ongoing','tr_descr_og_4~2')"><span class="span_link" onmouseover="this.style.cursor='pointer'">close this box</span></p>
    			</div>
    		</td>
    	</tr>			
    
    	<tr id="tr_og_5">
    		<td class="time"><img src="images/arrow.gif" alt="ongoing"></td>
    		<td><a href="" onclick="get_url('php_respond/description.php?parent_event_id=596&tr=og_5&start_date=ongoing'); return false;">From Cranach to Monet: Highlights of the Pérez Simón Collection.</a></td>
    	</tr>			
    
    	<tr id="tr_og_6">
    		<td class="time"><img src="images/arrow.gif" alt="ongoing"></td>
    		<td><a href="" onclick="get_url('php_respond/description.php?parent_event_id=504&tr=og_6&start_date=ongoing'); return false;">Haute Arte 2006</a></td>
    	</tr>			
    
    </tbody>
    </table>
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by justbn_me
    The actual table itself exists prior to the HttpRequest. When the user clicks a link inside a table cell, a new row is added dynamically underneath the current TR.
    That new row is the one that I need to have an onClick event in the span.
    This changes things. My code suggestion was based on your original question which said nothing about this.

    Let's start over...

    The solution is now much simpler. When a new row is added, the onclick handler can be added to the span at that time. I'd have to see the get_url() code before I could make any further suggestions.

  10. #10
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike thanks for sticking with me on this. It's not often someone in a forum is this tenacious about solving a problem. Also, I'm sorry I didn't make that clear before. It's a typical newbie concern not to overwhelm a forum with too many details about the problem but then end up leaving out something important.

    My "get_url" is based on Prototype AJAX library. Here it is :

    Code:
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function get_url(url)
    {
    	// Use this function when a URL simply needs to be fetched
    
    	// Get the data from the server
    	var myAjax = new Ajax.Request(
    		url, 
    		{
    			method: 'get',
    			onComplete: parse_subsets
    		});
    		
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function parse_subsets(originalRequest)
    {
    
    
    	// Splits the server response into arrays for updatng different elements
    	// Each subset is delimited by "<sub>"
    
    	// This is for actual results from the server
    	var  subset = originalRequest.responseText.split('<sub>');
    
    
    	// Walk through subset & process according to tag (<el> or <fx> or <ins>)
    	for(i=1;i<subset.length;i++)
    	{
    		// Determine what type of action the subset contains
    		var action_content = subset[i];
     		var action = action_content.substring(0,action_content.indexOf(">") +1);
    		var content = action_content.substring(action_content.indexOf(">") +1,action_content.length);
    
    		switch(action)
    		{
    			case "<el>":
    				update_content(content);
    				break;
    			case "<fx>":
    				process_fx(content);
    				break;
    			case "<ins>":
    				process_insert(content);
    				break;
    			default:
    				alert('No matches in parse_subsets.');
    				break;
    		}
    
    	}
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function process_insert(originalRequest)
    {
    
    
    	// Pipe delimited list received in originalRequest
    	// Item 1 : Type of Insertion (before or after)
    	// Item 2 : ID of the existing element to base the insertion on
    	// Item 3 : ID of the new element (for existing check)
    	// Item 4 : The contents of the new element
    
    	var elements = originalRequest.split('|');
    	var insertion_type = elements[0];
    	var existing_element = elements[1];
    	var new_element_id = elements[2];
    	var new_element = elements[3];
    
    	// Check to see if the "new_element" already exists.  If so, remove it.
    	if(document.getElementById(new_element_id))
    	{
    		// first, remove the element
    		Element.remove(new_element_id);
    	}
    	
    	if (insertion_type == 'before')
    	{
    		new Insertion.Before(existing_element,new_element);
    	} else
    		{
    			new Insertion.After(existing_element,new_element);
    		}
    	
    	 
    	
    }
    
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function process_fx(elementGroup)
    {
    
    	// fx content consists of 2 parts
    	// first is the name of the function to perform, second is element to perform on
    
    	var elements = elementGroup.split('|');
    	var function_name = elements[0];
        var element_id = elements[1];
    
    	// Perform the function on the element_id
    	window[function_name](element_id);
    	
    }
    
    
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function initTableSpans(sTblId,div_to_hide)
    {
      var i, tbl = document.getElementById(sTblId);
      var spans = tbl.getElementsByTagName('span');
      for (i = 0; i < spans.length; ++i) {
        spans[i].onclick = function() {
          var p = this;
          do {
            p = p.parentNode;
          } while (p.tagName.toLowerCase() != 'tr');
          row_position = p.rowIndex;
    	squish_me(div_to_hide);
    
    
        } 
      }
    }
    
    
    ////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////
    function squish_me(elementGroup)
    {
    
    	var elements = elementGroup.split('~');
    	var element_id = elements[0];
    	var duration_str = elements[1];
    
    	if (!duration_str)
    	{
    		duration_str = 1;
    	}
    
    	element = $(element_id);
    
    
    new Effect.Squish(element_id);
    
    }
    What gets returned from that call is :

    Code:
    <sub><ins>after|tr_og_4|tr_descr_og_4|			<tr id="tr_descr_og_4">
    				<td colspan="2" class="eventinfo" >
    					<div id="descr_div_og_4" style="display: none;">
    								<h5>Description:</h5>
    		<p><p>A photo exhibit featuring the works of Dr. Janiz Minshew-Shurr 
    features photos from a recent trip to old Havana, Cuba, the heart of 
    Havana.  She has traveled around the world to photograph the sites 
    and the people.  Dr. Minshew-Shurr’s photographs have been 
    published in National Geographic and she has sold photos as a 
    stock photographer.</p> <p>“Cuba Today!” will be on display Monday thru Friday from 9:00 
    a.m.-5:00 p.m. and during all performances. </p></p>
    		<p>( <a href="http://www.ci.garland.tx.us/Home/Departments/Recreation+and+Cultural+Services/Garland+Arts/PA7+Calendar+of+Events_landing.htm">View Website</a> )</p>
    	
    								<h5>Location:</h5>
    		<p>The Small Theatre at the Granville Arts Center<br>
    		300 N. Fifth St.<br>
    		
    		Garland, TX 75040<br>
    		(972) 205-2790 </p>	
    						<p class="closeit" onmouseover="initTableSpans('ongoing','tr_descr_og_4~2')"><span class="span_link" onmouseover="this.style.cursor='pointer'">close this box</span></p>
    					</div>
    				</td>
    			</tr><sub><fx>unhide_me|descr_div_og_4~1
    So, the user clicks on the link inside <tr id="tr_og_4">. That fires off get_url('php_respond/description.php?parent_event_id=951&tr=og_4&start_date=ongoing').

    When the response comes back, the onComplete is passed to "parse_subsets". function parse_subsets breaks up the response into 2 different elements. One is <ins> the other is <fx>. The <ins> adds the row after the row the user clicked on. Then, the <fx> uses the BlindDown Scriptaculous effect to display the new row.

    Inside that new row is the span that contains "Close this box." That is what I am attempting to use to cause the row to disappear via initTableSpans & function squish_me.
    Justin Noel
    Better Than Broadway - The Best Local Theatre Calendar
    www.betterthanbroadway.com/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •