根据文本框输入隐藏/显示行 [英] Hide/Show Rows based on text box input
问题描述
我有一个包含10行的表格，我希望当页面首次打开时，除了第一行之外的所有行都隐藏了
。如果用户将值放在第一行的
文本框中，那么我希望显示第二行。如果
，他们在第二行的文本框中放置一个值，然后显示
第三行等等等等等10行。我是javascript的新手，所以
我不知道从哪里开始。任何帮助都会很棒，非常感谢。
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I''m pretty new to javascript, so
I''m not to sure where to start. Any help would be great, thanks a lot.
推荐答案
< ji **** *******@gmail.com>在消息中写道
新闻：11 ********************** @ i39g2000cwa.googlegr oups.com ...
<ji***********@gmail.com> wrote in message
news:11**********************@i39g2000cwa.googlegr oups.com...
我有一个包含10行的表，我想在页面首次打开时隐藏第一行以外的所有行。如果用户将值放在第一行的
文本框中，那么我希望显示第二行。如果他们在第二行的文本框中放置一个值，则将第三行等等显示为10行。我是javascript的新手，所以
我不知道从哪里开始。任何帮助都会很棒，非常感谢。
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I''m pretty new to javascript, so
I''m not to sure where to start. Any help would be great, thanks a lot.
尝试这种方法。
给第一个< tr>标记ID，row1。
给第二个< tr>标签 - >像这样：< tr id =" row2"
style =" visibility：hidden;"> ...你的东西...< / tr>
给第三个tr标签的id为row3。
（等）
设置你想要隐藏在标签中的所有行的可见性。
然后对于第一行内的文本框：
<输入类型=''text''name =''firstname''id =''firstname''
onchange =''makeItShow（" row2"，this）''/>
会调用此函数:(未经测试）
// ********************** *************
函数makeItShow（someRow，theTextBox）{
if（theTextBox.value！=""）{
var nextRow = document.getElementById（someRow）;
nextRow.style.visiblility =" visible";
} else {
nextRow.style.visibility =" hidden";
}
}
// ***** *********************************
每个文本框都会发送函数的下一行。
尝试t的变体他和你应该有一个起点。
HTH
Hal
Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
style="visibility:hidden;"> ...your stuff ... </tr>
Give the third tr tag an id of "row3".
(etc)
set the visibility of all rows you want hidden in the tag.
Then for the text box inside the FIRST row:
<input type=''text'' name=''firstname'' id=''firstname''
onchange=''makeItShow("row2",this)'' />
which would call this function: (not tested )
//***********************************
function makeItShow(someRow, theTextBox){
if (theTextBox.value != ""){
var nextRow = document.getElementById(someRow);
nextRow.style.visiblility = "visible";
}else {
nextRow.style.visibility="hidden";
}
}
//**************************************
Each text box would send the id of the next row to the function.
Try variations of this, and you should have a starting point.
HTH
Hal
Hal Rosser在18/04说/ 2006 11:19 AM AEST：
Hal Rosser said on 18/04/2006 11:19 AM AEST:
< ji *********** @ gmail.com>在消息中写道
新闻：11 ********************** @ i39g2000cwa.googlegr oups.com ......
<ji***********@gmail.com> wrote in message
news:11**********************@i39g2000cwa.googlegr oups.com...
我有一个包含10行的表，我想在页面首次打开时隐藏第一行以外的所有行。如果用户将值放在第一行的
文本框中，那么我希望显示第二行。如果他们在第二行的文本框中放置一个值，则将第三行等等显示为10行。我是javascript的新手，所以
我不知道从哪里开始。任何帮助都会很棒，非常感谢。
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I''m pretty new to javascript, so
I''m not to sure where to start. Any help would be great, thanks a lot.
尝试这种方法。
给第一个< tr>标记ID，row1。
给第二个< tr>标签 - >像这样：< tr id =" row2"
Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
我不打扰ID，只需使用行索引。获取当前行的行索引
，并设置下一个可见（如果有的话）。
例如
< title> Show Rows< / title>
< style type =" text / css">
#fred {visibility：hidden ;}
< / style>
< table>
< tbody>
< tr>
< td>< input onkeypress =" showNext（this）;">
< tbody id =" fred" >
< tr>
< td>< input onkeypress =" showNext（this）;">
< tr>
< td>< input onkeypress =" showNext（this）;">
< / table>
< script type =" text / javascript">
function showNext（el）{
function getTR（el）{
while（el.parentNode&&''tr''！= el.nodeName.toLowerCase（））{
el = el.parentNode;
}
return（''tr ''== el.nodeName.toLowerCase（））？ el：null;
}
var row = getTR（el）;
if（row）{
var t = row.parentNode.parentNode;
var nRow = t.rows [row.rowIndex + 1];
if（nRow&& nRow.style） {
nRow.style.visibility =''visible'';
}
}
}
< / script>
当然应该用脚本设置样式，以便默认情况下行可以看到
。另外一个策略是添加onkeypress函数onload，然后
每个都可以明确地将以下行设置为可见。
在我看来，这里的逻辑可能会变得非常复杂，试图找出
哪些行显示和隐藏 - 如果没有
内容，应该隐藏一行？后续的行也应该隐藏吗？用户如何知道
隐藏了多少行？
通常的技巧是将行上的按钮（或类似元素）放到
显示/隐藏下一个，以便用户可以控制。它大大降低了脚本逻辑的复杂性。
-
Rob
组常见问题解答：< URL ：http：//www.jibbering.com/FAQ>
I''d not bother with IDs, just use the row index. Get the row index of
the current row, and set the next one visible (if there is one).
e.g.
<title>Show Rows</title>
<style type="text/css">
#fred {visibility: hidden;}
</style>
<table>
<tbody>
<tr>
<td><input onkeypress="showNext(this);">
<tbody id="fred">
<tr>
<td><input onkeypress="showNext(this);">
<tr>
<td><input onkeypress="showNext(this);">
</table>
<script type="text/javascript">
function showNext(el) {
function getTR(el) {
while (el.parentNode && ''tr'' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return (''tr'' == el.nodeName.toLowerCase())? el : null;
}
var row = getTR(el);
if (row){
var t = row.parentNode.parentNode;
var nRow = t.rows[row.rowIndex + 1];
if (nRow && nRow.style){
nRow.style.visibility = ''visible'';
}
}
}
</script>
Of course the style should be set with script so that the rows are
visible by default.
Another strategy is to also add the onkeypress functions onload, then
each could explicitly set the following row to visible.
Seems to me the logic here could get quite convoluted trying to work out
which rows to show and hide - should a row be hidden if it has no
content? Should subsequent rows be hidden too? How does a user know
how many rows are hidden?
The usual trick is to put a button (or similar element) on the row to
show/hide the next one so the user is in control. It greatly reduces
the complexity of scripting logic.
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
Hal Rosser写道：
Hal Rosser wrote:
< ji ******* ****@gmail.com>在消息中写道
新闻：11 ********************** @ i39g2000cwa.googlegr oups.com ......
<ji***********@gmail.com> wrote in message
news:11**********************@i39g2000cwa.googlegr oups.com...
我有一个包含10行的表，我想在页面首次打开时隐藏第一行以外的所有行。如果用户将值放在第一行的
文本框中，那么我希望显示第二行。如果他们在第二行的文本框中放置一个值，则将第三行等等显示为10行。我是javascript的新手，所以
我不知道从哪里开始。任何帮助都会很棒，非常感谢。
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I''m pretty new to javascript, so
I''m not to sure where to start. Any help would be great, thanks a lot.
尝试这种方法。
给第一个< tr>标记ID，row1。
给第二个< tr>标签 - >像这样：< tr id =" row2"
style =" visibility：hidden;"> ......你的东西...< / tr>
Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
style="visibility:hidden;"> ...your stuff ... </tr>
请注意，visibility：hidden仍会显示
的空格行，只是不是内容。如果这是OP希望实现的价格，那就没问题。
Be aware that visibility:hidden will still display the SPACE for the
row, just not the contents. That''s fine if that''s what the OP wants to
achieve.
这篇关于根据文本框输入隐藏/显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
