首页 > 解决方案 > 在正文中的标题旁边显示百分比

问题描述

我是学习 Javascript、Jquery 和 HTML 的新手。我试图在标题(旁边)而不是在数据集表中显示/显示总平均值。我尝试了不同的方法,但它不会显示。(我尝试使用的最后一种方法是包含在代码中。我尝试了 <div class=">,但似乎没有任何效果

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
  doc = document;
  htm = doc.documentElement;
  bod = doc.body;
  nav = navigator;
  M = tag => doc.createElement(tag);
  I = id => doc.getElementById(id);
  mobile = /Mobi/i.test(nav.userAgent);
  S = (selector, within) => {
    let w = within || doc;
    return w.querySelector(selector);
  }
  Q = (selector, within) => {
    let w = within || doc;
    return w.querySelectorAll(selector);
  }
  hC = (node, className) => {
    return node.classList.contains(className);
  }
  aC = (node, ...classNames) => {
    node.classList.add(...classNames);
    return aC;
  }
  rC = (node, ...classNames) => {
    node.classList.remove(...classNames);
    return rC;
  }
  tC = (node, className) => {
    node.classList.toggle(className);
    return tC;
  }
  // small Library above - magic below can be put on another page using a load Event *(except // end load line)*
  const trs = Q('tbody>tr'),
    trsL = trs.length,
    prs = Q('tfoot>tr>td+td'),
    prsM = prs.length - 1,
    ya = [];

  function showAverages() {

    let total = 0;
    for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
      c = 0;
      for (let i = 0; i < l; i++) {
        c += ya[i][p];
      }
      t = (c / l * 100).toFixed(2);
      prs[p].textContent = t;
      total += (+t);
    }
    prs[prsM].textContent = (total / prsM).toFixed(2);
    var element = document.getElementById(prs[prsM]);
  }

  for (let i = 0, r, sels, y; i < trsL; i++) {
    r = trs[i];
    sels = Q('select', r);
    ya.push([]);
    for (let n = 0, s, q = sels.length; n < q; n++) {
      s = sels[n];
      s.value = 'Yes';
      y = s.value === 'Yes' ? 1 : 0;
      ya[i].push(y);
      s.oninput = () => {
        ya[i][n] = s.value === 'Yes' ? 1 : 0;
        showAverages();
      }
    }
  }

  showAverages();
}); // end load
//]]>
/* css/external.css */

* {
  /* set font-size separate to avoid white space issues */
  box-sizing: border-box;
  font-size: 0;
  padding: 0;
  margin: 0;
}

p {
  font: italic 16px Georgia, Garamond, serif;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

thead *,
tfoot * {
  font: bold 16px Arial, san-serif;
}

tbody * {
  font: 15px Arial, sans-serif;
}

td,
th {
  width: 90px;
  border: 1px solid #ccc;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background: #ddd;
}

tfoot>tr>td:not(:first-child):after {
  content: '%';
  font-weight: bold;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
  <title>Finding Average</title>

</head>

<body>

  <p>Finding and Display Average: <span id="element"></span></p>
  <!--the total average goes here-->
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sept</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
        <th>Total Average</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="percent_row">
        <td>Response Percent</td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr class="select_row">
        <td>Bought Office Supplies</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Saving's Over $25,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Savings</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget $10,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget $20,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
    </tbody>
  </table>

标签: javascripthtmljquerycss

解决方案


好的,我了解您的问题。

所以在你的CSS中你定义了一个font {size:0..... 正常的你看不到结果!所以我添加了一个p spanCSS 声明

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {

  doc = document;
  htm = doc.documentElement;
  bod = doc.body;
  nav = navigator;
  M = tag => doc.createElement(tag);
  I = id => doc.getElementById(id);

  mobile = /Mobi/i.test(nav.userAgent);
  S = (selector, within) => {
    let w = within || doc;
    return w.querySelector(selector);
  }
  Q = (selector, within) => {
    let w = within || doc;
    return w.querySelectorAll(selector);
  }
  hC = (node, className) => {
    return node.classList.contains(className);
  }
  aC = (node, ...classNames) => {
    node.classList.add(...classNames);
    return aC;
  }
  rC = (node, ...classNames) => {
    node.classList.remove(...classNames);
    return rC;
  }
  tC = (node, className) => {
    node.classList.toggle(className);
    return tC;
  }
  // small Library above - magic below can be put on another page using a load Event *(except // end load line)*
  const trs = Q('tbody>tr'),
    trsL = trs.length,
    prs = Q('tfoot>tr>td+td'),
    prsM = prs.length - 1,
    ya = [];

  function showAverages() {

    let total = 0;
    for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
      c = 0;
      for (let i = 0; i < l; i++) {
        c += ya[i][p];
      }
      t = (c / l * 100).toFixed(2);
      prs[p].textContent = t;
      total += (+t);
    }
    prs[prsM].textContent = (total / prsM).toFixed(2);
    var element = document.getElementById(prs[prsM]);
    $("#element").html((total / prsM).toFixed(2) + "%");
  }

  for (let i = 0, r, sels, y; i < trsL; i++) {
    r = trs[i];
    sels = Q('select', r);
    ya.push([]);
    for (let n = 0, s, q = sels.length; n < q; n++) {
      s = sels[n];
      s.value = 'Yes';
      y = s.value === 'Yes' ? 1 : 0;
      ya[i].push(y);
      s.oninput = () => {
        ya[i][n] = s.value === 'Yes' ? 1 : 0;
        showAverages();
      }
    }
  }

  showAverages();



});
/* css/external.css */

* {
  /* set font-size separate to avoid white space issues */
  box-sizing: border-box;
  font-size: 0;
  padding: 0;
  margin: 0;
}

p {
  font: italic 16px Georgia, Garamond, serif;
}

/* added ---------- */
p span {
 color:black;
 font : bold 16px Georgia, Garamond, serif;
}
/* ---------------- */

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

thead *,
tfoot * {
  font: bold 16px Arial, san-serif;
}

tbody * {
  font: 15px Arial, sans-serif;
}

td,
th {
  width: 90px;
  border: 1px solid #ccc;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background: #ddd;
}

tfoot>tr>td:not(:first-child):after {
  content: '%';
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
  <title>Finding Average</title>

</head>

<body>
<div>
  <p>Finding and Display Average: <span id="element"></span><br><br><br></p></div>
  <!--the total average goes here-->
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sept</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
        <th>Total Average</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="percent_row">
        <td>Response Percent</td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr class="select_row">
        <td>Bought Office Supplies</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Saving's Over $25,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Savings</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget $10,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
      <tr class="select_row">
        <td>Over Budget $20,000</td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
          <select>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
        <td>
        </td>
      </tr>
    </tbody>
  </table>


推荐阅读