SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove certain th/td w/removeChild

    I'm using a third party to populate the table (id=roster) contents and almost each tr contains seven th or td (with no id assigned to it). I can't find a good reference or example how to write the removeChild script that can be used to target the multiple non-id assigned sixth and seventh (last child) th or td to remove them.

    Also again there's several th without id that has colspan="7" attribute that is needed to be change to colspan"5". I figure I'll use replaceChild with setAttribute but not sure how I should approach the solution. So the question is how should the script be written that'll do the tricks?


    Thanks!

    jace

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody?

  3. #3
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    529
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'd do a loop through "roster" and on the 7th occurance of a <th> or <td> i'd perform the remove.

    Code:
    var element = //the td or th element;
    element.parentNode.removeChild(element);

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this goes through all td's within the roster element and then checks to see if there is an id, if not it removes the parent node.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
        <script type="text/javascript">
    
            function removeNoIdTR() {
                var roster = document.getElementById('roster');
                var tds = roster.getElementsByTagName('td');
                for(var i = tds.length-1; i >= 0; i--) {
                    alert(tds[i].id);
                    if(tds[i].id == null || tds[i].id == '') {
                        tds[i].parentNode.parentNode.removeChild(tds[i].parentNode);
                    }
                }
            }
    
        </script>
    
    
     </HEAD>
    
     <BODY>
      
        <button onclick="removeNoIdTR();">Test</button>
    
      <table id="roster">
        <tr>
            <td colspan="7" id="1">test</td>
        </tr>
        <tr>
            <td colspan="7" id="2">test</td>
        </tr>
        <tr>
            <td colspan="7" id="3">test</td>
        </tr>
        <tr>
            <td colspan="7" id="4">test</td>
        </tr>
        <tr>
            <td colspan="7" id="5">test</td>
        </tr>
        <tr>
            <td colspan="7" id="6">test</td>
        </tr>
        <tr>
            <td colspan="7">test</td>
        </tr>
        <tr>
            <td colspan="7" id="7">test</td>
        </tr>
        <tr>
            <td colspan="7" id="8">test</td>
        </tr>
        <tr>
            <td colspan="7" id="9">test</td>
        </tr>
        <tr>
            <td colspan="7" id="10">test</td>
        </tr>
        <tr>
            <td colspan="7" id="11">test</td>
        </tr>
        <tr>
            <td colspan="7" id="12">test</td>
        </tr>
        <tr>
            <td colspan="7">test</td>
        </tr>
    </table>
    
    
     </BODY>
    </HTML>


  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The DOM sets up arrays of all of the nodes within a table specifically to make table processing easier. You ujust access the table tag and then access all of the parts of the table from there directly. Much easier than grabing each part of the table separately.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realized that my post lacks the better explanation on problem/solution I'm looking for, so I'll try again, my apology.

    bascially the third party software populates the roster table structure something like this:
    Code:
    <table id="roster">
    	<tr>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    continue to populate more tds depend on how many infomation are stored in db
    	<tr>
    		 <th colspan="7"></th>
    	</tr>
    	<tr>
          <th colspan="3"></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
    	</tr>
    		<th colspan="3"></th>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
    	</tr>
    		<th colspan="3"></th>
    		<th></th>
    		<th></th>
    		<th></th>
    		<th></th>
        </tr>
    	<tr>
    		<th colspan="7"></th>
    	</tr>
    </table>
    Now I need figure how a script should be written based on the process (to be honest I'm not a javascript/DOM genius and couldn't find any good example to figure how to do something like this challenge stuff):

    1. detect and remove (use removeChild which I figure is best solution for this step) each last two of th and td from each tr that has seven th/td

    2. modify th's attribute rowspan=7 to rowspan=5 due to the removal of ths and tds

    3. remove each last two of th and td in each tr that has 5 ths (one of them has rowspan=3 attribute).

    Hope it explains clearly and appreciate above posts...

    Thanks again,

    jace


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
  •