HTML表格不使用javascript下拉框_Javascript_Html_Css

HTML表格不使用javascript下拉框

javascript html css

HTML表格不使用javascript下拉框,javascript,html,css,Javascript,Html,Css,我有一个相对简单的网页，我无法让表格正常工作。我有一个输入字段、serialnumber和一个html/javascript下拉复选框。当我取出表格时，一切都正常，包括下拉框——除了良好的web格式。一旦我把它放进表格，网页就冻结了，包括dropbox不工作。我认为问题在于tr、/tr和/table的位置。下面是包含表的代码，以及导致错误的原因 <div class="col contentHome"> <h3>New Gateway</h3> <

我有一个相对简单的网页，我无法让表格正常工作。我有一个输入字段、serialnumber和一个html/javascript下拉复选框。当我取出表格时，一切都正常，包括下拉框——除了良好的web格式。一旦我把它放进表格，网页就冻结了，包括dropbox不工作。我认为问题在于tr、/tr和/table的位置。下面是包含表的代码，以及导致错误的原因

<div class="col contentHome">
  <h3>New Gateway</h3>
  <form>
    <table>
      <tr><td>Gateway Serial Number:</td><td><input type="text" 
        name="serialnumber" required/></td></tr>
      <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
          <tr><td>Gateway Properties</td><td><select><option>Select an 
            option</option></select></td></tr>
          <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
          <label for="one"><input type="checkbox" id="DG" />Dash Gateway</label>
          <label for="two"><input type="checkbox" id="DC" />Dash Controller</label>
          <label for="three"><input type="checkbox" id="SG" />Steering Gateway</label>
          <label for="three"><input type="checkbox" id="SC" />Steering Controller</label>
          <label for="three"><input type="checkbox" id="BC" />BoomHieght Controller</label>
        </div>
      </div>
    </table> 
    <br>
    <input type="submit" value="Create" />          
    <input type="hidden" 
      name="${_csrf.parameterName}" 
      value="${_csrf.token}"/>  
  </form>
</div>


新网关
网关序列号：
网关属性选择一个网关
选项
仪表板网关
仪表板控制器
转向网关
转向控制器
风挡控制器

这是该网页的快照。正如您所看到的，格式是正确的，但我缺少“创建”按钮，下拉框不起作用

关于表格的位置，tr，td，/td，/tr和/表格有什么想法吗？

表格中的div看起来不太好-如果您愿意，请参阅规范

这就是说，在chrome中，您提供的代码正在运行。下拉菜单正在运行，并且所有元素都可见。如果您将表中的div包装在适当的表行（tr）和数据（td）元素中，您的css可能就可以了


新网关
网关序列号：
网关属性选择一个网关
选项
仪表板网关
仪表板控制器
转向网关
转向控制器
风挡控制器

表中的div看起来不太好-如果您喜欢，请查看规格


新网关
网关序列号：
网关属性选择一个网关
选项
仪表板网关
仪表板控制器
转向网关
转向控制器
风挡控制器

如果以前没有人告诉你使用

进行布局是一种不好的做法，我想你应该听听我的意见：至少在原则上是这样。实际上，这种结构的一个主要缺点是，如果你需要的话，无法在狭窄的设备上响应地显示它们

您发布的代码最大的问题是您将

作为

的子代使用，尽管大多数现代浏览器倾向于原谅它，并且仍然按照您的预期呈现。但是，从技术上讲，这是非法的HTML

的唯一合法子元素是表元素：

如果将

放入其中，它们将自动包装在

中。因此，快速修复方法是将

包装在表元素中：

...
<table>
  ...
  <tr>
    <td colspan="2">
      <div class="multiselect">
        ...
      </div>
    </td>
  </tr>
  ...
</table>


新网关
网关序列号：
网关属性：
选择一个选项
仪表板网关
仪表板控制器
转向网关
转向控制器
风挡控制器