HTML table not working with javascript dropdown box

Question

I have a relatively simple webpage and I cannot get the table to work correctly. I have an input field, serialnumber, and an html/javascript drop-down checkbox. When I take out the table everything works fine including the drop-down block -- except nice web formatting. Once I put in the table the webpage freezes up including the dropbox not working. I presume the issue is the placement of tr, /tr, and /table. Here is the code with the table included and causes the error,

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

Here is a snapshot of the webpage. As you can see the formatting is correct but I am missing the "Create" button and the drop-down box does not work.

Any ideas on the placement of the table, tr, td, /td, /tr, and /table"?

also you have a div directly inside a table tag also, which is probably causing some strange behavior. — Ctznkane525
– Ctznkane525, Commented Jan 5, 2018 at 0:22
Ideas for the placement of table elements, yup, keep them for tabular data. Get rid of them for layout. — Jon P
– Jon P, Commented Jan 5, 2018 at 0:56

tao · Accepted Answer · 2018-01-05 01:06:41Z

4

If nobody told you using <table> for layout purposes is bad practice before, I guess you need to hear it from me: it is, at least in principle. In practice, one major downside of such constructs is there's no way to display them responsively on narrow devices, should you ever need to.

The biggest problem with the code you posted is you're using <div> as a child of <table>, although most modern browsers tend to forgive it and still render as you'd expect them. However, technically, it's illegal HTML.

The only legal children of <table> are table elements:

<tfoot>,
<tbody> and
<thead>.

If you place <tr>s in it they will automatically be wrapped in a <tbody>. So, the quickfix is to wrap your <div> inside table elements:

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

But the proper fix is to use block level elements to create your layout. This would be a starter, using flexbox:

.form-row {
  display: flex;
  flex-wrap: wrap;
}
.form-row > .left {
  flex-basis: 210px;
}
.form-row > .left ~ * {
  flex-grow: 1;
}

<div class="col contentHome">
  <h3>New Gateway</h3>
  <form>
    <div class="form-row">
      <span class="left">Gateway Serial Number:</span>
      <span><input type="text" name="serialnumber" required></span>
    </div>
    <div class="form-row multiselect" onclick="showCheckboxes()">
      <span class="left">Gateway Properties:</span>
      <span>
        <select>
          <option>Select an option</option>
        </select>
      </span>
    </div>
    <div class="overSelect"></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>
    <input type="submit" value="Create">
    <input type="hidden" 
      name="${_csrf.parameterName}" 
      value="${_csrf.token}">  
  </form>
</div>

Don't forget to prefix your CSS before deploying.

Note: If .overselect is supposed to be a modal of some kind, and it's not working with the code above, you need to update your question with a Minimal, Complete, and Verifiable example so I can be of more help.

edited Jan 5, 2018 at 1:06

answered Jan 5, 2018 at 0:26

tao

91.1k18 gold badges138 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skmansfield Over a year ago

Placing the div's inside the table did the job and it now formats correctly and the javascript drop-down checkbox works. I promise to review, this weekend, my wretched use of tables for formating and amend my html/javascript sins with the blessings of css!

tao Over a year ago

@skmansfield, in the end, best practices should be about compatibility with devices and use cases. If your code displays properly on all devices it's targeted at and in all use-cases you need, you shouldn't bother. The same goes with using mixed JavaScript + CSS over pure CSS. If it does the job and doesn't affect performance, it's good. It's all about result/time, considering maintainability and scalability, where the project requires it. Happy coding!

JasonB · Accepted Answer · 2018-01-05 00:25:42Z

0

The div's in the table don't look so good to me - see the specs if you like. html spec - tables

That being said, in chrome the code you provided is working. The drop down is working and all elements are visible. Your css is probably fine if you wrap the divs in the table inside of proper table rows(tr) and data(td) elements.

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

answered Jan 5, 2018 at 0:25

JasonB

6,4382 gold badges19 silver badges28 bronze badges

2 Comments

skmansfield Over a year ago

Thanks for adding the "Run Code Snippet" but it not working properly. This is due to the fact that there is no javascript code in this snippet.

JasonB Over a year ago

Right on - Feel free to add all of the relevant code to the question if fixing the table/div thing doesn't fix the issue on your end.

Collectives™ on Stack Overflow

HTML table not working with javascript dropdown box

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related