щелкните в любом месте строки таблицы, и он установит флажок в ...?

Question

Я пытаюсь понять, как это сделать, но я не могу это выяснить. По сути, я хочу иметь возможность щелкнуть в любом месте строки таблицы, и она установит / снимет флажок в ней. Я знаю, что это возможно, потому что именно это делает PHPMyAdmin ...

вот моя строка таблицы

<tbody>
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

</tbody>

Answer 1

<script type="text/javascript">
function selectRow(row)
{
    var firstInput = row.getElementsByTagName('input')[0];
    firstInput.checked = !firstInput.checked;
}
</script>

...

<tbody>
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>    
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>  
</tbody>

_{Примечание. У вас также есть коллизии по идентификаторам. Ваши идентификаторы должны быть уникальными.}

Вот альтернатива с программной привязкой:

document.querySelector("table").addEventListener("click", ({target}) => {
  // discard direct clicks on input elements
  if (target.nodeName === "INPUT") return;
  // get the nearest tr
  const tr = target.closest("tr");
  if (tr) {
    // if it exists, get the first checkbox
    const checkbox = tr.querySelector("input[type='checkbox']");
    if (checkbox) {
      // if it exists, toggle the checked property
      checkbox.checked = !checkbox.checked;
    }
  }
});

<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="chk1" name="chk1" />
      </td>
      <td>1</td>
      <td>2011-04-21 22:04:56</td>
      <td>action</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk2" name="chk2" />
      </td>
      <td>2</td>
      <td>2011-04-21 22:04:56</td>
      <td>action</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk2" name="chk3" />
      </td>
      <td>2</td>
      <td>2011-04-21 25:30:16</td>
      <td>action</td>
    </tr>
  </tbody>
</table>

Answer 2

Вам не нужен JavaScript для этого:

td label {
  display: block;
}

<td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td>

Только ярлыки и немного CSS.

Answer 3

Попробуйте это ...

$("tr").click(function() {
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.attr('checked', !checkbox.attr('checked'));
});

http://jsfiddle.net/dVay8/

Answer 4

Вы можете поменять <table> и положиться на роли CSS и ARIA . Таким образом, вы можете вместо этого сделать все <tr> a <label>. Это исключает необходимость использования JavaScript или дополнительной метки для каждой ячейки.

div[role="table"] {
  display: table;
}
label[role="row"] {
 display: table-row;
}
label[role="row"]:hover{
  background-color: rgba(0,96,212,.15);
}
span[role="cell"] {
 display: table-cell;
 padding: 3px 6px;
}

<div role="table">
  <label role="row">
    <span role="cell"><input type="checkbox" name="1"></span>
    <span role="cell">1</span>
    <span role="cell">2011-04-21 22:04:56</span>
    <span role="cell">action</span>
  </label>
  <label role="row">
    <span role="cell"><input type="checkbox" name="2"></span>
    <span role="cell">2</span>
    <span role="cell">2011-04-21 22:04:56</span>
    <span role="cell">action</span>
  </label>  
</div>