选择项目时显示和隐藏表格行

时间：2016-11-10 17:00:57

标签： javascript html css

无法让这个HTML / java脚本正常工作，现在已经工作了一天。在线查看并找到了我在这里编码的内容。我希望它在页面加载时不显示＆＃34; Colors *＆＃34;行。当我从下拉菜单中选择衬衫的尺寸时，它会显示颜色选项。

到目前为止，有点工作，其中有颜色和单选按钮的表调整大小并且没有正确显示，与上面的行长度相匹配，所以这就是我被卡住了。随着单选按钮允许选择所有这些而不是只有一个。

我添加了两张图片，展示了它的样子。 编辑：按钮问题已修复

我希望用javascript，没有jquery来做这件事。

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <script type="text/javascript" src="jsForm.js"></script> 
<title>Javascript with Forms</title>
<style type="text/css">
table{
        width: 800px;
        padding: 10px;
    }
</style>
</head>
<body>
  <form action="#">
    <table border="1">
    <caption>T-Shirt Selection</caption>
    <tr><td style="100px;"></td><td style="150px;"></td><td     style="50px;"></td><td  style="50px;"></td><td></td></tr>
        <tr>
            <th>Description</th>
            <th>Selection</th>
            <th>Qty</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>
                T_Shirt 1:  
            </td>
            <td>
                <select id="shirts" onchange="showButton(this)">
                    <option value="0" selected >Choose T-Shirt </option>
                    <option value="1" >Small $10.99</option>
                    <option value="2" >Medium $12.99</option>
                    <option value="3" >Large $14.99</option>
                    <option value="4" >X-Large $15.99</option>
                    <option value="5" >XX-Large $15.99</option>
                </select> 
            </td>
            <td>
                <input type="text" name="qty" maxlength="4" size="4" /> 
            </td>
            <td>
                <input type="text" name="qty" maxlength="10" size="10" /> 
            </td>
        </tr>


        <tr id="hidden_button" style="display:none;">
            <td colspan="1">Color.*</td>
            <td colspan="3">
            <input type="radio" name="Back" value="Black" /> Black
            <input type="radio"name="White" value="White" />White
            <input type="radio"name="Blue" value="Blue" />Blue
            <input type="radio" name="Red" value="Red"/>Red
            </td>   
        </tr>        </table>
    </form>
</body>

的Javascript 

function showButton(elem){
if(elem.value == 0){
    document.getElementById('hidden_button').style.display = "none";
}else if(elem.value > 0){
    document.getElementById('hidden_button').style.display = "block";
}

}

这就是我在说什么 enter image description here enter image description here

非常感谢任何帮助

4 个答案:

答案 0 :(得分：2)

您需要在脚本中使用display = "table-row"，而不是display = "block"

建议切换类而不是更改元素样式，如示例2所示。

function showButton(elem) {
  if (elem.value == 0) {
    document.getElementById('hidden_button').style.display = "none";
  } else if (elem.value > 0) {
    document.getElementById('hidden_button').style.display = "table-row";
  }
}
table {
  width: 800px;
  padding: 10px;
}
<form action="#">
  <table border="1">
    <caption>T-Shirt Selection</caption>
    <tr>
      <td style="100px;"></td>
      <td style="150px;"></td>
      <td style="50px;"></td>
      <td style="50px;"></td>
      <td></td>
    </tr>
    <tr>
      <th>Description</th>
      <th>Selection</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>
        T_Shirt 1:
      </td>
      <td>
        <select id="shirts" onchange="showButton(this)">
          <option value="0" selected>Choose T-Shirt</option>
          <option value="1">Small $10.99</option>
          <option value="2">Medium $12.99</option>
          <option value="3">Large $14.99</option>
          <option value="4">X-Large $15.99</option>
          <option value="5">XX-Large $15.99</option>
        </select>
      </td>
      <td>
        <input type="text" name="qty" maxlength="4" size="4" />
      </td>
      <td>
        <input type="text" name="qty" maxlength="10" size="10" />
      </td>
    </tr>


    <tr id="hidden_button" style="display:none;">
      <td colspan="1">Color.*</td>
      <td colspan="3">
        <input type="radio" name="Back" value="Black" />Black
        <input type="radio" name="White" value="White" />White
        <input type="radio" name="Blue" value="Blue" />Blue
        <input type="radio" name="Red" value="Red" />Red
      </td>
    </tr>
  </table>
</form>

样本2 

function showButton(elem) {
  if (elem.value == 0) {
    document.getElementById('hidden_button').classList.remove('show');
  } else if (elem.value > 0) {
    document.getElementById('hidden_button').classList.add('show');
  }
}
table {
  width: 800px;
  padding: 10px;
}

#hidden_button {
  display: none;
}
#hidden_button.show {
  display: table-row;
}
<form action="#">
  <table border="1">
    <caption>T-Shirt Selection</caption>
    <tr>
      <td style="100px;"></td>
      <td style="150px;"></td>
      <td style="50px;"></td>
      <td style="50px;"></td>
      <td></td>
    </tr>
    <tr>
      <th>Description</th>
      <th>Selection</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>
        T_Shirt 1:
      </td>
      <td>
        <select id="shirts" onchange="showButton(this)">
          <option value="0" selected>Choose T-Shirt</option>
          <option value="1">Small $10.99</option>
          <option value="2">Medium $12.99</option>
          <option value="3">Large $14.99</option>
          <option value="4">X-Large $15.99</option>
          <option value="5">XX-Large $15.99</option>
        </select>
      </td>
      <td>
        <input type="text" name="qty" maxlength="4" size="4" />
      </td>
      <td>
        <input type="text" name="qty" maxlength="10" size="10" />
      </td>
    </tr>


    <tr id="hidden_button">
      <td colspan="1">Color.*</td>
      <td colspan="3">
        <input type="radio" name="Back" value="Black" />Black
        <input type="radio" name="White" value="White" />White
        <input type="radio" name="Blue" value="Blue" />Blue
        <input type="radio" name="Red" value="Red" />Red
      </td>
    </tr>
  </table>
</form>

答案 1 :(得分：1)

您在以下部分中遇到的错误

<input type="radio" name="Back" value="Black" /> Black
<input type="radio"name="White" value="White" />White
<input type="radio"name="Blue" value="Blue" />Blue
<input type="radio" name="Red" value="Red"/>Red

因为您为单选按钮添加了不同的名称，所有这些名称都变得独立。将它们全部放在一个组中，将它们放在同一个组中。

<input type="radio" name="color" value="Black" /> Black
<input type="radio"name="color" value="White" />White
<input type="radio"name="color" value="Blue" />Blue
<input type="radio" name="color" value="Red"/>Red

答案 2 :(得分：1)

首先你必须修复第一个tr。在那里你有5 td，但你的colspan运行大约3 cols和所有其他tr（少了最后隐藏）有4 cols !!!

如果你写（如在你的第一个tr中）

，这是不好的代码 
style="100px;"

你忘了像width / height / etc这样的样式属性

没有必要写

colspan="1"

这是td。

的默认设置

答案 3 :(得分：0)

您可以点击此处添加课程脚本$('#shirts').on('click', function() { $(this).addClass('current').hidden_button(); });

相关问题
最新问题