时间戳

首页 > 解决方案 > 选择比率按钮后更改表格标题

javascript - 选择比率按钮后更改表格标题

问题描述

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

以下是一些片段：

<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 新手，因此请在您的答案中提供大量详细信息。

标签： javascripthtml

解决方案

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

由于您的表头具有该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>

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

干杯!

推荐阅读