2

因此，当我选择 1 个收音机（存在）时，我试图让两个输入框显示在表格中，如果我选择另一个（不存在），则隐藏它们。我得到了这段代码，但有一个小问题，

function absentSwitch() {
  document.getElementsByClassName("table-custom3")[0].style.display = 'none';

}

function presentSwitch() {
  document.getElementsByClassName("table-custom3")[0].style.display = 'block';

}
<table>
  <tr>
    <td class="table-custom2">
      <input type="radio" id="present" name="attendance" onclick="presentSwitch() " /</td>
      <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="absentSwitch() " /</td>
        <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
        <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
  </tr>
</table>

这段代码的问题是，我不能将它用于它下面的下一个用户。所以我尝试将 更改getElementsById为getElementsByClassName，但只有第一个文本框可见。有什么办法解决吗？

此外，我还阅读了一个更容易执行的 Jquery 代码，但找不到将其用于我的目的的教程。因此，对此的任何提示都值得赞赏。

4

4 回答 4

1

这是您的 HTML 代码

<table>
    <tr>
      <td class="table-custom2">
        <input type="radio" id="present" name="attendance" onclick="presentSwitch(this) "/></td>
        <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="absentSwitch(this) " /</td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
          <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    </tr>
  </table>

这是javascript函数

function absentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'none';
     event.parentElement.parentElement.children[3].style.display = 'none';
}
function presentSwitch(event) {
     event.parentElement.parentElement.children[2].style.display = 'block';
     event.parentElement.parentElement.children[3].style.display = 'block';
}

现在您可以处理表格中的多个输入

于 2020-04-28T07:26:11.100 回答
1

使用根据兄弟元素的状态切换的类怎么样？

就像是

.table-custom2.enabled ~ .table-custom3 { display: block; }
.table-custom2.disabled ~ .table-custom3  { display: none; }

function absentSwitch() {
  document.querySelector(".table-custom2").classList.replace("enabled", "disabled");
}

function presentSwitch() {
  document.querySelector(".table-custom2").classList.replace("disabled", "enabled");
}
于 2020-04-28T07:15:02.963 回答
1

使用循环隐藏和显示一个类的所有元素。

此外，您需要使用inline-block而不是block防止它们被放在不同的行上。

function absentSwitch() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'none');
}

function presentSwitch() {
  Array.from(document.getElementsByClassName("table-custom3")).forEach(el => el.style.display = 'inline-block');

}
<table>
  <tr>
    <td class="table-custom2">
      <input type="radio" id="present" name="attendance" onclick="presentSwitch() " /></td>
    <td class="table-custom2 "><input type="radio" id="absent" name="attendance" onclick="absentSwitch() " /></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
    <td class="table-custom3 "><input type="time " class="input-xsmall "></td>
  </tr>
</table>

于 2020-04-28T07:11:50.153 回答
1

如果不起作用，您需要将代码包装在table标签内getElementsByClassName。还getElementsByClassName返回数组元素，您需要按索引获取

[...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});


function absentSwitch() {

    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = 'none'});

}
function presentSwitch() {
    [...document.getElementsByClassName("table-custom3")].map((item)=> {item.style.display = ''});

}
<table>
<tr>
<td class="table-custom2"><input type="radio" id="present" name="attendance" onclick="presentSwitch()" /></td>
<td class="table-custom2"><input type="radio" id="absent" name="attendance" onclick="absentSwitch()" /></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
<td class="table-custom3"><input type="time" class="input-xsmall"></td>
</tr>
</table>

于 2020-04-28T07:10:06.600 回答