Question

我有一个带有两个单选按钮的页面。默认情况下，一个单选按钮处于选中状态，但是如果另一个单选按钮处于选中状态，而没有按下任何按钮，则我希望表格中的标题更改。

以下是一些摘要：

<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的新手，因此请在回答中提供许多详细信息。

Answer 1

每个单选按钮（或复选框）都有一个名为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>

如果您想更改标题样式（颜色，大小等），则一旦按类或按ID获得元素，就可以使用setAttribute函数或执行element.style.<css-property-name> = <value>轻松完成。堆栈溢出有成千上万这样的问题，关于使用Java脚本触发或更改元素属性。

干杯！

选择比率按钮时更改表格标题

1 个答案: