Question

到目前为止，我只是在Jquery中找到解决方案，但我试图用Javascript解决这个问题。

我想检查一个框并隐藏行的文本内容中的其他单元格。

使用Javascript：

var rowElements = document.getElementsByClassName('tr-checked'),
for (var i = 0; i < rowElements.length; i++ ) {
  rowElements[i].addEventListener('click',  function(e){
      var clickedElement = e.target; 
      if ( clickedElement.nodeName === 'input' && clickedElement.checked === true ) {
            // if the clicked element is an input element, and is checked, meaning it's a checkbox, do the following:
           this.parent.children.textContent = "";
      }
  })
}

HTML：

<table>
  <thead>
    <tr>
      <td></td>
      <td class="column-a">Course 1</td>
      <td class="column-b">Course 2</td>
      <td class="column-c">Course 3</td>
    </tr>
  </thead>
  <tbody>
    <tr class="row-a tr-checked">
      <td><input type="checkbox"></input></td>
      <td class="column-a">Specification 1</td>
      <td class="column-b">Specification 1</td>
      <td class="column-c">Specification 1</td>
    </tr>
    <tr class="row-b tr-checked">
      <td><input type="checkbox"></input></td>
      <td class="column-a">Specification 2</td>
      <td class="column-b">Specification 2</td>
      <td class="column-c">Specification 2</td>
    </tr>
    <tr class="row-c tr-checked">
      <td><input type="checkbox"></input></td>
      <td class="column-a">Specification 3</td>
      <td class="column-b">Specification 3</td>
      <td class="column-c">Specification 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr></tr>
  </tfoot>
</table>

Answer 1

你可以这样做，

var rowElements = document.querySelectorAll('.tr-checked input[type="checkbox"]');
for (var i = 0; i < rowElements.length; i++) {
  rowElements[i].addEventListener('change', function(e) {
   var nextElement = this.parentElement.nextElementSibling;
   while(nextElement) {
    nextElement.style.display = this.checked ? "none" : "table-cell";
    nextElement = nextElement.nextElementSibling;
   }
  });
}

DEMO

Answer 2

这是我的解决方案：

<table>
<thead>
<tr>
  <td></td>
  <td class="column-a">Course 1</td>
  <td class="column-b">Course 2</td>
  <td class="column-c">Course 3</td>
</tr>
</thead>
<tbody>
<tr class="row-a tr-checked">
  <td>
    <input type="checkbox" onchange="say(this)"></input>
  </td>
  <td class="column-a">Specification 1</td>
  <td class="column-b">Specification 1</td>
  <td class="column-c">Specification 1</td>
</tr>
<tr class="row-b tr-checked">
  <td>
    <input type="checkbox" onchange="say(this)"></input>
  </td>
  <td class="column-a">Specification 2</td>
  <td class="column-b">Specification 2</td>
  <td class="column-c">Specification 2</td>
</tr>
<tr class="row-c tr-checked">
  <td>
    <input type="checkbox" onchange="say(this)"></input>
  </td>
  <td class="column-a">Specification 3</td>
  <td class="column-b">Specification 3</td>
  <td class="column-c">Specification 3</td>
</tr>
</tbody>
<tfoot>
 <tr></tr>
</tfoot>
</table>

的Javascript

 function say(v)
 {
    $(v.parentNode.parentNode).hide();
 }

选中输入时隐藏整行

2 个答案:

DEMO