如何在表单打开时调用OnChange

时间：2015-02-19 20:32:41

标签： javascript php jquery html

我的代码有效，除了它打开时，它不会显示下拉列表中的内容。当您在下拉列表中选择一个值时，它可以完美地运行。我希望它打开隐藏的表，然后当更改为其他东西时，它显示它。表单打开时是否可以调用onchange？

我的代码：

<table width="522" border="0" text-align="center">   
    <tr>
        <td width="124">Number of animals:</td>
        <td width="129"> 
           <select name="count" select id= "count" onchange="showRows(this)">
              <option value="00">00</option>
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
            </select>
        </td>
    </tr>
</table>
<table width="404" border="0" align="left" cellpadding="0" cellspacing="0" id="mytab" >
    <tr class="tabletitle">
        <td width="16" class="invisible">00</td>
        <td width="16" align="right" class="tabletitle">#</td>
        <td width="73" align="center" class="tabletitle">Gender</td>
        <td width="60" align="center" class="tabletitle">ID Number</td>
        <td width="281" align="center" class="tabletitle">Name</td>
    </tr>
    <tr class="light" id=>
        <td align="right" class="invisible">01</td>
        <td align="right" class="count">1</td>
        <td class="white">
            <select name="gender1">
                <option value="Select" selected="selected">Select</option> 
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </td>
        <td class="white"><input name="id_number1" type="text" id="id_number1" size="10" ></td>
        <td class="white"><input name="name1" type="text" id="name1" size="35" ></td>
    </tr>

    <tr class="light">
        <td align="right" class="invisible">02</td>
        <td align="right" class="count">2</td>
        <td class="white">
            <select name="gender2">
                <option value="Select" selected="selected">Select</option> 
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </td>
        <td class="white">
          <input name="id_number2" type="text" id="id_number2" size="10" >
        </td>
        <td class="white"><input name="name2" type="text" id="name2" size="35" ></td>
    </tr>

<tr class="light">
    <td align="right" class="invisible">03</td>
    <td align="right" class="count">3</td>
    <td class="white"><select name="gender3">
        <option value="Select" selected="selected">Select</option> 
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select></td>
    <td class="white"><input name="id_number3" type="text" id="id_number3" size="10" ></td>
    <td class="white"><input name="name3" type="text" id="name3" size="35" ></td>
</tr>

<tr class="light">
    <td align="right" class="invisible">04</td>
    <td align="right" class="count">4</td>
    <td class="white"><select name="gender4">
        <option value="Select" selected="selected">Select</option> 
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select></td>
        <td class="white"><input name="id_number4" type="text" id="id_number4" size="10" ></td>
        <td class="white"><input name="name4" type="text" id="name4" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible"0>05</td>
<td align="right" class="count">5</td>
<td class="white"><select name="gender5">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number5" type="text" id="id_number5" size="10" ></td>
<td class="white"><input name="name5" type="text" id="name5" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible">06</td>
<td align="right" class="count">6</td>
<td class="white"><select name="gender6">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number6" type="text" id="id_number6" size="10" ></td>
<td class="white"><input name="nam6e" type="text" id="name6" size="35" ></td>
</tr>


</table>

CSS：

.white { 
    font-family:arial;
    padding:5px;
}

.tabletitle {
    font-family:arial;
    padding:5px;
}

.invisible {
    color:white;
}
.count {
    font-family:arial;
    color:#999;
    padding:5px;

}

使用Javascript：

function showRows(s){
    var t=s.options[s.selectedIndex].text;
    var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=0, r, c;
    while(r=rows[i++]){
        if(t=='12'){
            r.style.display=''
        } else{
            c=r.getElementsByTagName('td')[0].firstChild.nodeValue;
            r.style.display=c<=t?'':'none';
        }
    }
}

2 个答案:

答案 0 :(得分：0)

您可以在加载页面时调用showRows函数：

window.onload = function() {
  showRows(document.getElementById("count"));
}

这是FIDDLE

答案 1 :(得分：0)

一些事情......

  1. 表格在某些浏览器中呈现，但编写的代码会遇到问题。 html文件应以开头<html>标记开头。
  2. 前<html>标记应为<!DOCTYPE html>，指示浏览器将文档读取为HTML5。
  3. 接下来，该表格应移至<body>，并且附加的结束标记</table>不与文档中的下一个表格混合。
  4. 您的文档应以</body></html>结尾。在结束</div>代码后删除结束</html>代码。
  5. 我添加了window.onload = hideTable，以便Javascript在首次加载页面时调用函数。
  6. 我添加了function hideTable()来隐藏表mytabs。
  7. 我在显示行之前添加了一行来显示表格。

    8. 玩得开心！

    <!DOCTYPE html>
<html>
<head>

<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">


<style>
.white {How 
font-family:arial;
padding:5px;}

.tabletitle {
font-family:arial;
padding:5px;}
.invisible {
color:white;}
.count {
font-family:arial;
color:#999;
padding:5px;}

</style>

<script type="text/javascript">
function showRows(s){

var t=s.options[s.selectedIndex].text;
var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=0, r, c;
    document.getElementById('mytab').style.display=''; // Display the table
    while(r=rows[i++]){
        if(t=='12'){r.style.display=''}
        else{
            c=r.getElementsByTagName('td')[0].firstChild.nodeValue;
            r.style.display=c<=t?'':'none';
        }
    }
}

function hideTable(){
    document.getElementById('mytab').style.display='none';
}

window.onload = hideTable;

</script>
</head>
<body>
<table width="522" border="0" text-align="center">   
<tr>
<td width="124">Number of animals:</td>
<td width="129"> <select name="count" select id= "count" onchange="showRows(this)">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
</select>
</td>
</table>

<br>
<table width="404" border="0" align="left" cellpadding="0" cellspacing="0" id="mytab" >
<tr class="tabletitle">
<td width="16" class="invisible">00</td>
<td width="16" align="right" class="tabletitle">#</td>
<td width="73" align="center" class="tabletitle">Gender</td>
<td width="60" align="center" class="tabletitle">ID Number</td>
<td width="281" align="center" class="tabletitle">Name</td>
</tr>

<tr class="light" id=>
<td align="right" class="invisible">01</td>
<td align="right" class="count">1</td>
<td class="white"><select name="gender1">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number1" type="text" id="id_number1" size="10" ></td>
<td class="white"><input name="name1" type="text" id="name1" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible">02</td>
<td align="right" class="count">2</td>
<td class="white"><select name="gender2">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number2" type="text" id="id_number2" size="10" ></td>
<td class="white"><input name="name2" type="text" id="name2" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible">03</td>
<td align="right" class="count">3</td>
<td class="white"><select name="gender3">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number3" type="text" id="id_number3" size="10" ></td>
<td class="white"><input name="name3" type="text" id="name3" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible">04</td>
<td align="right" class="count">4</td>
<td class="white"><select name="gender4">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number4" type="text" id="id_number4" size="10" ></td>
<td class="white"><input name="name4" type="text" id="name4" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible"0>05</td>
<td align="right" class="count">5</td>
<td class="white"><select name="gender5">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number5" type="text" id="id_number5" size="10" ></td>
<td class="white"><input name="name5" type="text" id="name5" size="35" ></td>
</tr>

<tr class="light">
<td align="right" class="invisible">06</td>
<td align="right" class="count">6</td>
<td class="white"><select name="gender6">
<option value="Select" selected="selected">Select</option> 
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
<td class="white"><input name="id_number6" type="text" id="id_number6" size="10" ></td>
<td class="white"><input name="nam6e" type="text" id="name6" size="35" ></td>
</tr>


</table>

</body>

</html>
相关问题
最新问题