选择比率按钮后更改表格标题答案

【问题标题】：change table header upon selecting of ratio button选择比率按钮后更改表格标题
【发布时间】：2019-01-15 12:25:10
【问题描述】：

我有一个带有两个单选按钮的页面。默认情况下选中一个单选按钮，但如果选中另一个单选按钮，则无需按任何按钮，我希望表中的标题发生更改。

这里有一些sn-ps：

<table class="table table-sm table-secondary" style="margin-bottom: 0">
  <thead style="background-color: #cb5797">
    <tr>
      <th scope="col" class="text-center">Duration (min)</th>
      <th scope="col" class="text-center hideme" data-period="outdoor">
        Speed1
      </th>
      <th scope="col" class="text-center">Incline (%)</th>
    </tr>
  </thead>
</table>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input
      type="radio"
      name="environment"
      id="indoor"
      value="indoor"
      checked="checked"
    />
    Indoor
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="environment" id="outdoor" value="outdoor" />
    Outdoor
  </label>
</div>

我试图让这个例子工作，但没有成功 Show/hide DIV based on selected with data-toggle="buttons" input radio button bootstrap 3

仅供参考，我是 javascript 新手，因此请在您的回答中提供大量详细信息。

【问题讨论】：

你想要纯 JavaScript 还是 JQuery，就像你链接的帖子一样？
尝试查看 Javascript 的 onclick 事件。

标签： javascript html

【解决方案1】：

每个单选按钮（或复选框）都有一个名为 onchange 的事件。对于单选按钮和复选框，onchange 事件在选中状态发生更改时发生。您可以创建两个函数并添加它们，如下面的 sn-p 所示。

由于您的表头具有data-period="outdoor" 属性，我猜这就是您想要更改的内容。这可以使用getElementById 和setAttribute 函数来完成。出于学习目的，我还添加了一些代码来更改标题背景颜色。

function toggleIndoor() {
  console.log("toggleIndoor changed!");

  // Change the header data-period attribute
  var headerCell = document.getElementById("tochange");
  headerCell.setAttribute("data-period", "indoor");
  printHeaderDataPeriod();

  // Change the header color
  var tableHeader = document.getElementById("table-head");
  tableHeader.style.backgroundColor = "#cb5797";
}

function toggleOutdoor() {
  console.log("toggleOutdoor changed!");
  var headerCell = document.getElementById("tochange");

  headerCell.setAttribute("data-period", "outdoor");
  printHeaderDataPeriod();

  // Change the header color
  var tableHeader = document.getElementById("table-head");
  tableHeader.style.backgroundColor = "#aa00bb";
}

function printHeaderDataPeriod() {
  var headerCell = document.getElementById("tochange");
  var headerAttr = headerCell.getAttribute("data-period");
  console.log("Table has data-period: " + headerAttr);
}

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
<input type="radio" name="environment" id="indoor" value="indoor" checked="checked" onchange="toggleIndoor()"> Indoor
</label>
  <label class="btn btn-secondary">
<input type="radio" name="environment" id="outdoor" value="outdoor" onchange="toggleOutdoor()"> Outdoor
</label>
</div>

<table class="table table-sm table-secondary" style="margin-bottom: 0">
  <thead style="background-color: #cb5797" id="table-head">
    <tr>
      <th scope="col" class="text-center">Duration (min)</th>
      <th scope="col" class="text-center hideme" data-period="outdoor" id="tochange">Speed1</th>
      <th scope="col" class="text-center">Incline (%)</th>
    </tr>
  </thead>
</table>

如果您想更改标题样式（颜色、大小等），可以使用setAttribute 函数或element.style.<css-property-name> = <value> 轻松完成，只要您按类或ID 获取元素。堆栈溢出有成千上万个这样的问题，关于使用 java-script 触发或更改元素属性。

干杯！

【讨论】：