显示/隐藏表格行 [英] show/hide a table row
问题描述
我想添加一些javascript来显示/隐藏
表的某一行。该表的第一行包含调用
javascript的超链接，第二行是我想用切换方式用
javascript显示/隐藏的那一行。 br />
这个问题是一个知道很少的javascript而且已经变得令人难以置信地感到沮丧因为我继续认为它会像C一样。不是。不是。 />
我知道我可以使用这些行来完成实际的工作：
document.getElementById（" row"）。style.display =" ;无英寸; //隐藏行
document.getElementById（" row"）。style.display =" inline" ;; //显示行
但我不认为我可以使用getElementById，因为我想
通过它与超链接的关系来引用元素那叫做javascript的
，我知道这可以做到。你会看到一页上会有几张
表，我希望能够独立切换每一个
;希望用相同的javascript。
任何帮助大大提高，
提前感谢。
oLE
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don''t think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
推荐答案
" oLE" <醇**** @ dsl.pipex.com>在消息中写道
news：41 ********************* @ news.dial.pipex.com ..。
"oLE" <ol****@dsl.pipex.com> wrote in message
news:41*********************@news.dial.pipex.com.. .
我想添加一些javascript来显示/隐藏
表的某一行。该表的第一行包含调用
javascript的超链接，第二行是我想用切换方式显示/隐藏的那个。
问题是知道很少的javascript并且变得令人难以置信地感到沮丧，因为我继续认为它会像C.它的
没有。
我知道我可以使用这些线来做实际工作：
document.getElementById（" row"）。style.display =" none" ;; //隐藏行
document.getElementById（" row"）。style.display =" inline" ;; //显示行
但我不认为我可以完全使用getElementById因为我想通过它与调用
javascript的超链接的关系来引用该元素，我知道这可以做到。你会看到一页上会有几张表格，我希望能够独立地切换每一张表格。希望有相同的javascript。
任何帮助大大提高，
提前感谢。
oLE
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don''t think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
你好Ole
看看 www.corstorphinehouse.com/d/avail.html ，它有点复杂，但它可能对你有帮助......
Hi Ole
Have a look at www.corstorphinehouse.com/d/avail.html, it is a bit
complicated, but it may help you...
oLE写道：
我想添加一些javascript来显示/隐藏
表的某一行。该表的第一行包含调用
的超链接javascript，第二行是我想用切换方式显示/隐藏
javascript的那一行。
问题是知道很少的javascript并且变得非常令人沮丧因为我继续以为它会像C.
那样没有。
我知道我可以使用这些线来做实际工作：
document.getElementById（" row"）。style.display =" none" ;; //隐藏行
document.getElementById（" row"）。style.display =" inline" ;; //显示行
但我不认为我可以完全使用getElementById，因为我希望
通过它与
调用javascript的超链接的关系来引用元素，我知道这可以做到。你会看到在一个页面上会有
几个表格，我希望能够独立地切换每个表格。希望有相同的javascript。
任何帮助大大提高，
提前感谢。
oLE
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don''t think i can use a getElementById exactly because i want to reference the element via its relationship to the hyperlink that calls the javascript, i know this can be done. You see there will be several tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/TR/xhtml1/ DTD / xhtml1-strict.dtd">
< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">
< head>
< title> untitled< / title>
< style type = " text / css">
body {
font：80％verdana;
background：＃600; < br $>
}
#redtable {
宽度：400px;
保证金：24px auto;
背景：#faa;
}
#greentable {
宽度：400px;
保证金：24px汽车;
背景：#afa;
}
#bluetable {
宽度：400px;
保证金：24px自动;
背景：#aaf;
}
td {
字母间距：.5em;
text-align：center;
border：3px #fff凹槽;
}
td a {
字母间距：.05em;
颜色：＃000;
}
td a：悬停{
颜色：＃f00;
}
< / style>
< script type =" text / javascript">
//<！[CDA TA [
功能切换（oLink）
{
var obj = oLink;
/ //从Link节点开始
while（obj&& ！/tbody/i.test（obj.parentNode.nodeName））
//遍历tbody
obj = obj.parentNode;
//然后到下一个tr
var nextrow = obj.nextSibling;
if（null！= nextrow）
{
//样式对象
var s = nextrow.style;
//切换显示
s.display =（s .display ==''none''）？ ''''：''没有';
var txt =''show rowhide row'';
//从字符串中删除当前链接文本
txt = txt.replace（oLink.firstChild.nodeValue，''''）;
//追加剩余的子串
oLink.replaceChild（document.createTextNode （txt），oLink.firstChild）;
}
}
//]]>
< / script>
< / head>
< body>
< table id =" redtable" >
< tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< table id =" greentable">
< tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< table id =" bluetable">
< tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
表元素有自己专有的CSS显示值。 />
对于行，它是---> table-row。
似乎有一些关于
设置CSS显示到空字符串的可移植性的争议，理论上这将是
导致浏览器提供默认值（渲染值）。当然
他们会对此发表评论...
http://www.blooberry.com/indexdot/cs...fy/display.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
body {
font: 80% verdana;
background : #600;
}
#redtable {
width: 400px;
margin: 24px auto;
background: #faa;
}
#greentable {
width: 400px;
margin: 24px auto;
background: #afa;
}
#bluetable {
width: 400px;
margin: 24px auto;
background: #aaf;
}
td {
letter-spacing: .5em;
text-align: center;
border: 3px #fff groove;
}
td a {
letter-spacing: .05em;
color: #000;
}
td a:hover {
color: #f00;
}
</style>
<script type="text/javascript">
//<![CDATA[
function toggle(oLink)
{
var obj = oLink;
///start at Link node
while (obj && !/tbody/i.test(obj.parentNode.nodeName))
//traverse up to tbody
obj = obj.parentNode;
//then over to next tr
var nextrow = obj.nextSibling;
if (null != nextrow)
{
//Style object
var s = nextrow.style;
//toggle display
s.display = (s.display == ''none'') ? '''' : ''none'';
var txt = ''show rowhide row'';
//remove current link text from string
txt = txt.replace(oLink.firstChild.nodeValue, '''');
//append remaining substring
oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
}
}
//]]>
</script>
</head>
<body>
<table id="redtable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="greentable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
<table id="bluetable">
<tbody>
<tr>
<td><a href="#null" onclick="toggle(this)">hide row</a></td>
</tr><tr>
<td>blah blah blah blah blah</td>
</tr>
</tbody>
</table>
</body>
</html>
Table elements have their own proprietary CSS display values.
For rows it''s ---> "table-row".
There seems to be some controversy about the portability of
setting CSS display to the empty string, which in theory will
cause the browser to supply the default (rendered value). Sure
they''ll be some comment on this...
http://www.blooberry.com/indexdot/cs...fy/display.htm
RobB写道：
RobB wrote:
oLE写道：
oLE wrote:
我想添加一些javascript来显示/隐藏某个一排表。表的第一行包含调用
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls
的超链接
the
javascript第二行是我要显示/隐藏的那一行这个问题是一个知道很少的javascript并且已经成为
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become
非常棒的
incredibly
感到沮丧，因为我继续认为它会像C一样。
frustrated because i went ahead thinking it was going to be like C.
它不是。
its not.
我知道我可以使用这些行来完成实际工作：
document.getElementById（" row"）。style.display =" none" ;; //隐藏行
document.getElementById（" row"）。style.display =" inline" ;; //显示行
但我不认为我可以完全使用getElementById，因为我想要
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don''t think i can use a getElementById exactly because i want
to
通过它的关系引用元素
calls
javascript，我知道这可以做到。你会在一个页面上看到
the javascript, i know this can be done. You see there will be
several
表格，我希望能够独立切换每个表格。希望有相同的javascript。
任何帮助很大的appriecated，
提前感谢。
oLE
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
any help greatly appriecated,
thanks in advance.
oLE
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns =" http：//www.w3.org/1999/xhtml" XML：朗= QUOT;恩" lang =" en">
< head>
< title>无标题< / title>
< style type =" text / css">
body {
字体：80％verdana;
背景：＃600;
}
#redtable {
宽度：400px;
保证金：24px auto;
背景：#faa;
}
#greentable {
宽度：400px;
页边距：24px auto;
背景：#afa ;
}
#bluetable {
宽度：400px;
保证金：24px auto;
背景：#aaf;
}
td {
字母间距：.5em;
text-align：center;
border：3px #fff凹槽;
}
td a {
letter-间距：.05em;
颜色：＃000;
}
td a：悬停{
颜色：＃f00;
}
< / style>
< script type =" text / javascript">
//<！[CDATA [
功能切换（oLink） {
var obj = oLink;
///从Link节点开始
while（obj&&！/tbody/i.test（obj.parentNode.nodeName））
//遍历to tbody
obj = obj.parentNode;
//然后转到下一个tr
var nextrow = obj.nextSibling;
if（null！= nextrow）
{
//样式对象
var s = nextrow.style;
//切换显示
s.display =（s.display ==''none''）？ ''''：''none'';
var txt =''show rowhide row'';
//从字符串中移除当前链接文本
txt = txt.replace（oLink。 firstChild.nodeValue，''''）;
//追加剩余的子串
oLink.replaceChild（document.createTextNode（txt），oLink.firstChild）;
}
}
//]]>
< / script>
< / head>
< body>
< table id =" redtable">
< tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< table id =" greentable">
< ; tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< table id =" bluetable">
< ; tbody>
< tr>
< td>< a href =" #null" onclick =" toggle（this）"> hide row< / a>< / td>
< / tr>< tr>
< td> blah blah blah blah blah< / td>
< / tr>
< / tbody>
< / table>
< / body>
< / html>
表元素有自己专有的CSS显示值。
对于行，它是--->关于将CSS显示设置为空字符串的可移植性似乎存在一些争议，理论上这将导致浏览器提供默认值（呈现）值）。当然
他们会对此发表评论...
http://www.blooberry.com/indexdot/cs...fy/display.htm
感谢你的帮助RobB和WindAndWaves，我会给你一个机会。
oLE
thanks for your help RobB and WindAndWaves, i''ll give these a go.
oLE
这篇关于显示/隐藏表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
