472,133 Members | 1,447 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,133 software developers and data experts.

adding line-through style to a table row

I want that if user clicks in a checkbox, the strike-through effect applices
to current table row. I tried the following code in IE, but nothing happens.

Any idea ?

<table>
<tr><td><input type=checkbox onclick="cbonclick(this)"></td>
<td><input type=text value="Row 1" ></td>
<td><select><option>pine</option><option>orange</option></select></td></tr>

<tr><td><input type=checkbox onclick="cbonclick(this)"></td>
<td><input type=text value="Row 2"></td>
<td><select><option>apple</option><option>kiwi</option></select></td></tr>
</table>

<script>
function cbonclick(othis) {
othis.parentNode.parentNode.style.textDecoration=
othis.checked? 'line-through':'';
}
</script>

Jul 20 '05 #1
6 14840
"Andrus" <no****************@online.ee> writes:
I want that if user clicks in a checkbox, the strike-through effect applices
to current table row. I tried the following code in IE, but nothing happens.


You can't make strike-through (or any other text decoration) affect
input or select elements.

<input type="text" value="test" style="text-decoration:strike-through">
gives normal text in the textbox.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
DU
Lasse Reichstein Nielsen wrote:
"Andrus" <no****************@online.ee> writes:

I want that if user clicks in a checkbox, the strike-through effect applices
to current table row. I tried the following code in IE, but nothing happens.

You can't make strike-through (or any other text decoration) affect
input or select elements.


line-through works in select (at least options in select) in NS 7.x,
Mozilla-based browsers. One could also simply change the color from
black to silver for input type="text" and options and then make the
input and select disabled=true.

<input type="text" value="test" style="text-decoration:strike-through">
gives normal text in the textbox.

/L


CSS2 is line-through, not strike-through.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

Jul 20 '05 #3
DU <dr*******@hotREMOVEmail.com> writes:
line-through works in select (at least options in select) in NS 7.x,
Mozilla-based browsers.
It appears it works in IE6 too. I was checking in Opera 7, where it
doesn't.
Ofcourse, saying anything about input elements in general is dangerous,
since there is no standard that defines how they look.
CSS2 is line-through, not strike-through.


Doh. That's what I meant, ofcourse.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:7k**********@hotpop.com...
DU <dr*******@hotREMOVEmail.com> writes:
line-through works in select (at least options in select) in NS 7.x,
Mozilla-based browsers.
It appears it works in IE6 too. I was checking in Opera 7, where it
doesn't.
Ofcourse, saying anything about input elements in general is dangerous,
since there is no standard that defines how they look.
CSS2 is line-through, not strike-through.


The code below following code shows line-through effect in IE 6

I have a table whose rows contain

<input type=text>, <input type=checkbox>, <span> <select> and <textarea>
elements cells.

Which is the best way to change cbonclick() so that it applies this effect
to all elements in table row ?

<table>
<tr><td><input type=checkbox onclick="cbonclick(this)"></td>
<td><input type=text value="Row 1" ></td>
<td><select><option>pine</option><option>orange</option></select></td></tr>

<tr><td><input type=checkbox onclick="cbonclick(this)"></td>
<td><input type=text value="Row 2" style="text-decoration:line-through"</td>

<td><select style="text-decoration:line-through"><option>apple</option>
<option>kiwi</option></select></td></tr>
</table>

<script>
function cbonclick(othis) {
othis.parentNode.parentNode.style.textDecoration=
'line-through';
}
</script>
Jul 20 '05 #5
y-*******@em-lyon.com (Yep) writes:
Well it seems to work as of my Opera7b version, or are my glasses
striken-through ;-) See code below (a bit strange I'll admit, but IMHO
quite adapted to the problematic, especially in regards of the CSS
complex issues involved).
When I test it in O7.20b1, only the text Hello is line-through'ed, not
the input or select elements.
/*@cc_on
What does this fancy comment do? It is something in JScript.NET, right?
Shouldn't it be /*@cc_on */ ?
Uncommenting the next line made no difference in Opera 7.20b1.
elems={td:true, input:true, select:true};


/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6
Yep
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<7k**********@hotpop.com>...
y-*******@em-lyon.com (Yep) writes:
When I test it in O7.20b1, only the text Hello is line-through'ed, not
the input or select elements.


Interesting. The version I've been testing on is
Version 7.0
Build 2349
Platform Win32
System Windows 98
and it strikes the INPUT and SELECT elements correctly. If you add
inline style to the form controls, it even strikes twice :-)
/*@cc_on

What does this fancy comment do? It is something in JScript.NET, right?


Well I don't know for JScript.Net; in (good old) JScript that's
conditional compilation; the point actually is that browser detection
was
(IMHO) required here, given the CSS complex rules and UAs different
behaviors I'd come across (your findings with latest O7 may change the
approach, though).
Regards,
Yep.
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Garry | last post: by
1 post views Thread by Geoff Biggs | last post: by
10 posts views Thread by David | last post: by
11 posts views Thread by Steven D'Aprano | last post: by
3 posts views Thread by AMD Desktop | last post: by
2 posts views Thread by Anna | last post: by
1 post views Thread by Brian Conklin | last post: by
8 posts views Thread by Jason | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.