Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Remove and Modify th/td

    This is beyond my DOM knowledge. I have a table that list the players (fantasy football) that is populated by a third party cms something like:

    basic table structure:
    Code:
    <table align="center" cellspacing="1" class="homepagemodule report" id="roster">
    	<tbody>
            	<tr>
    			<th class="player">Player</th>
    			<th class="points">YTD Pts</th>
    			<th class="week">Bye</th>
    			<th class="salary">Salary</th>
    			<th class="contractyear">Year</th>
    			<th class="contractstatus">Status</th>
    			<th class="contractinfo">Contract</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 roster...
    		<tr>
    			<th colspan="7"></th>
    		</tr>
    		<tr>
    			<th colspan="3"></th>
    			<th></th>
    			<th></th>
    			<th></th>
    			<th></th>
    		</tr>
    continue more of th with rowspan=3 or 7...
    A demo outputted table can be found at to view the detail of table structure: http://deafiron.com/2007/test.html

    Now how should the script be write that will perform:

    1. Remove each sixth and seventh th/td from rows that has 7 th/td

    2. Remove each last two th from rows that has a th with colspan=3 attribute

    3. Modify each th with colspan=7 attribute into colspan=5


    appreciate any help!

    DoubleJ

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!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></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    function RemoveRows(id,nu){
     var table=document.getElementById(id)
     var rows=table.getElementsByTagName('TR')
     for (var zxc0=0;zxc0<rows.length;zxc0++){
      var cols=rows[zxc0].getElementsByTagName('TD')
      if (cols.length>nu){
       for (var zxc0a=0;zxc0a<2;zxc0a++) rows[zxc0].removeChild(cols[cols.length-1]);
      }
      var ths=rows[zxc0].getElementsByTagName('TH')
      if (ths.length>2){
       for (var zxc0b=0;zxc0b<2;zxc0b++) rows[zxc0].removeChild(ths[ths.length-1]);
      }
      if (ths.length>0&&ths.length<nu) ths[0].colspan=(nu-ths.length+1);
     }
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="RemoveRows('roster',5)">
    <table align="center" cellspacing="1" class="homepagemodule report" id="roster" border="1" >
    	<tbody>
            	<tr>
    			<th class="player">Player</th>
    			<th class="points">YTD Pts</th>
    			<th class="week">Bye</th>
    			<th class="salary">Salary</th>
    			<th class="contractyear">Year</th>
    			<th class="contractstatus">Status</th>
    			<th class="contractinfo">Contract</th>
    		</tr>
            	<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    			<td>5</td>
    			<td>6</td>
    			<td>7</td>
    		</tr>
            	<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    			<td>5</td>
    			<td>6</td>
    			<td>7</td>
    		</tr>
    		<tr>
    			<th colspan="7">7</th>
    		</tr>
    		<tr>
    			<th colspan="3">3</th>
    			<th>4</th>
    			<th>5</th>
    			<th>6</th>
    			<th>7</th>
    		</tr>
    </tbody>
    </table>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome! it works like a charm. Except one thing that I should have mention that the template is populated by third party too, thus no way for me to insert onload="RemoveRows('roster',5)" into the <body>. Only way I can introduce the codes to template by insert them into the between of <body> and </body>.

    I tried an alternative trigger but it seem doesn't work:
    Code:
    <script language="javascript">
    window.onload="RemoveRows('roster',5)";
    </script>
    I don't know whether this is correct alternative trigger method to call up the replace/modify function or if there's different better alternative trigger method?

    Thanks again for help,

    DoubleJ

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by DoubleJ View Post
    Code:
    <script language="javascript">
    window.onload="RemoveRows('roster',5)";
    </script>
    I don't know whether this is correct alternative trigger method to call up the replace/modify function or if there's different better alternative trigger method?
    Your example is wrong for two reasons. The first is that you turned the function call into a string by surrounding it with quotation marks and the second is that you need to call the function within another function because it has parameters.

    Code:
    <script type="text/javascript">
    	window.onload = function () { // anonymous function
    		RemoveRows("roster", 5);
    	};
    </script>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    while Arbitrator solution will work if there is only one window on load event it only allows for one onload event call.

    If this is a problem

    Code:
    <!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></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    var id='roster',nu=5;
    
    function RemoveRows(zxcevt,zxcpar){
     var table=document.getElementById(id)
     var rows=table.getElementsByTagName('TR')
     for (var zxc0=0;zxc0<rows.length;zxc0++){
      var cols=rows[zxc0].getElementsByTagName('TD')
      if (cols.length>nu){
       for (var zxc0a=0;zxc0a<2;zxc0a++) rows[zxc0].removeChild(cols[cols.length-1]);
      }
      var ths=rows[zxc0].getElementsByTagName('TH')
      if (ths.length>2){
       for (var zxc0b=0;zxc0b<2;zxc0b++) rows[zxc0].removeChild(ths[ths.length-1]);
      }
      if (ths.length>0&&ths.length<nu) ths[0].colspan=(nu-ths.length+1);
     }
    }
    
    function zxcEventAdd(zxco,zxct,zxcf,zxcp) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    zxcAddEvt(window,'RemoveRows','load')
    
    /*]]>*/
    </script></head>
    
    <body>
    <table align="center" cellspacing="1" class="homepagemodule report" id="roster" border="1" >
    	<tbody>
            	<tr>
    			<th class="player">Player</th>
    			<th class="points">YTD Pts</th>
    			<th class="week">Bye</th>
    			<th class="salary">Salary</th>
    			<th class="contractyear">Year</th>
    			<th class="contractstatus">Status</th>
    			<th class="contractinfo">Contract</th>
    		</tr>
            	<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    			<td>5</td>
    			<td>6</td>
    			<td>7</td>
    		</tr>
            	<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    			<td>5</td>
    			<td>6</td>
    			<td>7</td>
    		</tr>
    		<tr>
    			<th colspan="7">7</th>
    		</tr>
    		<tr>
    			<th colspan="3">3</th>
    			<th>4</th>
    			<th>5</th>
    			<th>6</th>
    			<th>7</th>
    		</tr>
    </tbody>
    
    </table>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great it works like a charm and it's a hellva complex script!

    The script'll make the contents fit the wide of sidebar well without overcrowd it: http://deafiron.com/2007/test/test.html

    Thanks again,

    DoubleJ


  •  

    Posting Permissions

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