通过JS判断表单值确定表格显示或隐藏的问题

例如，TD0内input表单内输入数值小于3，则TD1、TD4显示；大于3小于10，则TD2、TD5显示；大于10，则TD3、TD6显示；如果没有输入，则TD7、TD8显示。
因为不太懂JS，请各位老师最好能把代码写出来，谢谢。
在线等，感激不尽！

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function change(a){
    var td1=document.getElementById("t1");
    var td2=document.getElementById("t2");
    td1.style.visibility="hidden";
    td2.style.visibility="hidden";
    if(a.value<5){
    td1.style.visibility="visible";
    }else{
    td2.style.visibility="visible";
    }
    }
    </script>
    </head><body>
    <table id="test">
    <tr>
         <TD><input type="text" onblur="change(this)"></TD>
            <td style="visibility:visible" id="t1">2</td>
            <td id="t2" style="visibility:hidden">3</td>
        </tr>
    </table>
    </body>
    </html>类似这样？
      

  2.   

    <table>
    <tr>
    <td><input type="text" onblur="check(this)" /></td>
    <td style="display:none">td1</td>
    <td style="display:none">td2</td>
    <td style="display:none">td3</td>
    <td style="display:none">td4</td>
    <td style="display:none">td5</td>
    <td style="display:none">td6</td>
    <td style="display:none">td7</td>
    <td style="display:none">td8</td>
    </tr>
    </table>
    <script>
        function check(o) {
            var v = parseInt(o.value), cells = o.parentNode.parentNode.cells;
            for (var i = 1, j = cells.length; i < j; i++) cells[i].style.display = 'none';
            if (!isNaN(v)) {
                if (v < 3) cells[1].style.display = cells[4].style.display = '';
                else if (v > 3 && v < 10) cells[2].style.display = cells[5].style.display = '';
                else cells[3].style.display = cells[6].style.display = '';
            }
            else cells[7].style.display = cells[8].style.display = '';
        }
    </script>
      

  3.   

    把楼上的代码改了一点，增加了input值为非数字的提示
    另外楼主没说=3和=10咋办，我私自给改成<=3和<=10了  <table>
      <tr>
      <td><input type="text" onblur="check(this)" /></td> 
      <td style="display:none">td1</td> 
      <td style="display:none">td2</td> 
      <td style="display:none">td3</td> 
      <td style="display:none">td4</td> 
      <td style="display:none">td5</td> 
      <td style="display:none">td6</td> 
      <td>td7</td> 
      <td>td8</td> 
      </tr> 
      </table> 
      <script>     
      function check(o) {
      var v = parseInt(o.value), cells = o.parentNode.parentNode.cells;
      for (var i = 1; i < cells.length; i++) cells[i].style.display = 'none';
      if (o.value.length == 0) cells[7].style.display = cells[8].style.display = '';
      else if (isNaN(v)) {
    alert("请填写数字！");
    o.select();
    return;
      }
      else {
      if (v <= 3) cells[1].style.display = cells[4].style.display = '';
      else if (v > 3 && v <= 10) cells[2].style.display = cells[5].style.display = '';
      else cells[3].style.display = cells[6].style.display = '';
      }
      } 
      </script>
      

  4.   

    另外，如果这些td不是在同一个tr里，那上面的代码就不好使了
    可以给table一个id，用getElementsByTagName解决
    重点是td1~td8得是这个有id的table的第2~9个td（第一个td可以用来放input）  <table id="tab_1">
      <tr>
      <td colspan="3"><input type="text" onblur="check(this)" /></td> 
      </tr>
      <tr>
      <td style="display:none">td1</td> 
      <td style="display:none">td2</td> 
      <td style="display:none">td3</td> 
      </tr>
      <tr>
      <td style="display:none">td4</td> 
      <td style="display:none">td5</td> 
      <td style="display:none">td6</td> 
      </tr>
      <tr>
      <td>td7</td> 
      <td>td8</td> 
     </tr> 
      </table> 
      <script>     
      function check(o) {
      var v = parseInt(o.value), cells = document.getElementById("tab_1").getElementsByTagName("td");
      for (var i = 1; i < cells.length; i++) cells[i].style.display = 'none';
      if (o.value.length == 0) cells[7].style.display = cells[8].style.display = '';
      else if (isNaN(v)) {
    alert("请填写数字！");
    o.select();
    return;
      }
      else {
      if (v <= 3) cells[1].style.display = cells[4].style.display = '';
      else if (v > 3 && v <= 10) cells[2].style.display = cells[5].style.display = '';
      else cells[3].style.display = cells[6].style.display = '';
      }
      } 
      </script>