/    Sign up×
Community /Pin to ProfileBookmark

dynamic js lists

Copy linkTweet thisAlerts:
Dec 12.2005

> >

Hi all

> >
> >

Sorry if this is not a specific JS question but I’m sure someone
> > will be able to help me with the following.

> >
> >

I have an input form on a webpage and below it a table which pulls out of
> > a database. The column headers in the table relate to the input form in
> > that I want whatever the user types into the input box for the correct
> > column to be highlighted in bold. So say, for example I had two columns A
> > and B I want column B to be highlighted bold when the user types ‘b’ into
> > the input box


>
>

at

>
> >

the top. How can I do this?

Very new to js but fairly competent in html/xml/dhtml + sql/zope
– so go easy on me!

Thanks
Rich

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzDec 12.2005 — There's more than one way to do that.

Could you give us the big picture of what you want to do?

P.S. In general DHTML involves JavaScript, so it's odd for you to say you know DHTML but not JavaScript.
Copy linkTweet thisAlerts:
@raharleyauthorDec 13.2005 — Sorry - I meant I'm fairly used to zopes dtml-if, dtml-else, dtml-in, dtml-var etc as opposed to PHP. I have no experience of javascript since I've never had to use it really, until now!

The bigger picture is that I have a table on a webpage which takes its information from an SQL table, 'horses1'. It displays five columns, 'name', 'jockey', 'soft rating' 'good rating', 'firm' rating. Theres a list of ratings for each horse of how they perform on each surface. What I want to do is simply have an input box at the top of the webpage whereby I can input 'soft', 'good' or 'firm' and the horse with the highest rating for the column I type in will be highlighted. So say for example horse A has a soft rating of 50 and horse B has a soft rating of 46, when I type 'soft' into the input box at the top, I want horse A's row to be highlighted. When I type 'firm', I want the horse with the highest firm rating to be highlighted. Sounds simple but I've no idea where to start...

Thanks

Rich
Copy linkTweet thisAlerts:
@KorDec 13.2005 — You may start from something like that:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var rows;
onload = function(){
var softArr=[];var goodArr=[];var firmArr=[];
rows = document.getElementById('mytab').getElementsByTagName('tr');
for (var i=1;i<rows.length;i++){
var cells = rows[i].getElementsByTagName('td');
softArr[softArr.length]=[Number(cells[2].firstChild.data),'s'];
goodArr[goodArr.length]=[Number(cells[3].firstChild.data),'g'];
firmArr[firmArr.length]=[Number(cells[4].firstChild.data),'f'];
}
arrMax=['','',sortA(softArr),sortA(goodArr),sortA(firmArr)];
}
function sortA(a){
var b= a.sort(function (a, b) {return a[0] == b[0] ? 0 : (a[0] < b[0] ? -1 : 1)});
return b[b.length-1][0];
}
function highl(q){
for(var i=1;i<rows.length;i++){
var val = Number(rows[i].getElementsByTagName('td')[q].firstChild.data);
rows[i].style.backgroundColor=(val==arrMax[q])?'#66ccff':'';
}
}
</script>
</head>
<body>
<select id="sel" onchange="highl(this.selectedIndex+1)">
<option> -- select --</option>
<option value="soft rating">soft rating</option>
<option value="good rating">good rating</option>
<option value="firm rating">firm rating</option>
</select>
<br>
<br>

<table width="500" border="0" cellpadding="2" cellspacing="2" bgcolor="#FFFFCC" id="mytab">
<tr>
<td>name</td>
<td>jockey</td>
<td>soft rating</td>
<td>good rating</td>
<td>firm rating</td>
</tr>
<tr>
<td>Aaaa</td>
<td>Grgr</td>
<td>50</td>
<td>44</td>
<td>32</td>
</tr>
<tr>
<td>Vvvv</td>
<td>Bgbg</td>
<td>35</td>
<td>57</td>
<td>24</td>
</tr>
<tr>
<td>Dddd</td>
<td>Mjmj</td>
<td>38</td>
<td>23</td>
<td>53</td>
</tr>
<tr>
<td>Ffff</td>
<td>Xdxd</td>
<td>45</td>
<td>34</td>
<td>44</td>
</tr>
</table>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@raharleyauthorDec 13.2005 — Thanks very much for your time- I'll give it a whirl.
Copy linkTweet thisAlerts:
@raharleyauthorDec 13.2005 — Thanks very much for your time - I'll give it a tweak but the basic code addressed the problem perfectly.

Cheers.
×

Success!

Help @raharley spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...