title: HTML table, need a checkbox column
body: <p>Eventually this list will be populated with hundreds of rows, coming from a database. How would I go about populating the last column of every row with checkboxes? And a master checkbox at the header, upon being clicked, will select every other checkbox?</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
                  &lt;table id="data-table" class="table table-striped table-bordered nowrap" width="100%"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;IO&lt;/th&gt;
                              &lt;th&gt;Signals&lt;/th&gt;
                              &lt;th&gt;&lt;input name="select_all" value="1" type="checkbox"&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;1&lt;/td&gt;
                              &lt;td&gt;Ambient Temperature&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name1" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;2&lt;/td&gt;
                              &lt;td&gt;Analog Input 1&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name2" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;3&lt;/td&gt;
                              &lt;td&gt;Analog Input 2&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name3" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;4&lt;/td&gt;
                              &lt;td&gt;Backup Battery&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name4" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;5&lt;/td&gt;
                              &lt;td&gt;Main Power&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name5" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;6&lt;/td&gt;
                              &lt;td&gt;Signal Strength&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name6" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;7&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name7" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;8&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name8" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;9&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name9" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name10" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name11" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name12" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name13" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name14" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name15" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name16" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name17" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name18" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name19" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name20" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name21" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name22" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name23" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name24" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name25" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name26" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name27" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name28" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name29" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name30" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name31" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name32" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name33" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name34" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name35" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="odd gradeX"&gt;
                              &lt;td&gt;Trident&lt;/td&gt;
                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                              &lt;td&gt;&lt;input type="checkbox" name="name36" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  </code></pre>