/    Sign up×
Community /Pin to ProfileBookmark

problem with selecting table row.

Copy linkTweet thisAlerts:
Sep 15.2005

Hello there guys.

Attached herewith is my html file with javascript code.
As you can see at my file, when I click a row, the background color change for that row. However, I wanted to change the border line property of ‘TD’ and the number in left column becomes bold everytime the row is selected. I can’t do it with my javascript code, can someone out there know how it will do.

Please help me with this matter. I was stucked on that code.

Thanks.

[upl-file uuid=21cb8fe6-d650-4685-9984-5918d1118f87 size=5kB]htmlfile.zip[/upl-file]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@BabySpidyauthorSep 15.2005 — Hello again guys.

Please help me with this matter. Any help is much appreciated. I need that function badly. I've been running out of idea how will the border line change and number makes bolder on selected row.

Please please please...
Copy linkTweet thisAlerts:
@BabySpidyauthorSep 16.2005 — Hello.

Thanks for your reply.

My apology if I can't understand your reply well.

About making bold the font weight of the number, it only becomes bold when the row is selected, if not selected then the font weight of the number is normal.

I'm just a beginner in javascripting. I don't know about onFocus and onBlur functions.

As you can see on my file, I'm almost there but lack of idea to pursue.

Thanks a lot.
Copy linkTweet thisAlerts:
@FangSep 16.2005 — function tt_mout () {
if (this.lconfig.clicked != this) {
this.cells[0].style.fontWeight='normal';
this.cells[0].style.borderStyle='solid';
this.cells[1].style.borderStyle='solid';
this.set_color(this.order ? this.config.odd_color : this.config.even_color);
// this.set_border('1px solid #f5f5f5');
}

}

function tt_onclick () {
if (this.lconfig.clicked == this) {
this.cells[0].style.fontWeight='normal';
this.cells[0].style.borderStyle='solid';
this.cells[1].style.borderStyle='solid';
this.lconfig.clicked = this;
// this.onmouseover();
// this.style.border= "2px solid #444444";
}
else {
this.cells[0].style.fontWeight='bold';
this.cells[0].style.borderStyle='dotted';
this.cells[1].style.borderStyle='dotted';
var last_clicked = this.lconfig.clicked;
this.lconfig.clicked = this;
if (last_clicked) last_clicked.onmouseout();
this.set_color(this.config.onclick_color);
// this.set_border('10px solid #444444');
// this.style.border= "2px solid #444444";
}
}
There is a typo: TD {
text-align:left; border: #999999 1px solid; padding-right: 8px; padding-left: 8px; font-weight: normal;
padding-bottom: 3px; vertical-align: baseline; line-height: 1.3em; padding-top: [COLOR=Red]3p[/COLOR];
}
Copy linkTweet thisAlerts:
@BabySpidyauthorSep 16.2005 — Hallo Fang.

Thanks for your help.

I didn't notice the error on my html file, thanks for that.

Your modification on my javascript file works fine however, how can I make the border to be solid and 2px the line weight?

And also, when I click again the selected row, it go back to a normal fontweight.

Thanks for your help.
Copy linkTweet thisAlerts:
@FangSep 16.2005 — That requires a rewrite of the script; remove the existing script, then add:
<script type="text/javascript">
<!--
var aRows;
onload=function() {
resetRows();
for(var i=0; i<aRows.length; i++) {
if (aRows[i].addEventListener) { // Mozilla
aRows[i].addEventListener('click', function() { highLight(this); }, false);
}
else {
aRows[i].onclick=function() {highLight(this);}
}
}
}

function resetRows() {
aRows=document.getElementById('menu_table').rows;
for(var i=0; i<aRows.length; i++) {
var classnname=(i % 2)? 'odd' : 'even';
aRows[i].className=classnname;
aRows[i].cells[0].className=classnname;
aRows[i].cells[1].className=classnname;
}
}

function highLight(obj) {
if(obj.className=='highlight') {
resetRows();
}
else {
resetRows();
obj.className='highlight';
obj.cells[0].className='highlight0';
obj.cells[1].className='highlight1';
} <br/>
}
//--&gt;
&lt;/script&gt;

and CSS:<i>
</i>.highlight { background:#ffc;}
.highlight0 {border:2px solid #000;border-right:0; font-weight:bold;}
.highlight1 {border:2px solid #000;border-left:0;}
.odd {border:1px solid #999; background:#fff; font-weight:normal;}
.even {border:1px solid #999; background:#f6f8fd; font-weight:normal;}

and change the table tag:<i>
</i>&lt;TABLE id="menu_table" cellspacing="0" style="width:100%;"&gt;

The CSS may still require a little adjustment.
Copy linkTweet thisAlerts:
@BabySpidyauthorSep 16.2005 — Hello Fang.

Thanks for your help. I really appreciate it a lot. I'll test it and check if I can optimize it.

Thanks again.
×

Success!

Help @BabySpidy 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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