...

View Full Version : Remove and Modify th/td



DoubleJ
07-15-2007, 11:03 PM
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:


<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

vwphillips
07-16-2007, 01:14 AM
<!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>

DoubleJ
07-16-2007, 05:21 AM
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:


<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

Arbitrator
07-16-2007, 10:40 AM
<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.


<script type="text/javascript">
window.onload = function () { // anonymous function
RemoveRows("roster", 5);
};
</script>

vwphillips
07-16-2007, 02:32 PM
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


<!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>

DoubleJ
07-16-2007, 09:29 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum