jQuery：全选 <td> `的` <tr> 除了特定的 <td> `

Question

我想选择单击的tr所有td （具有输入复选框的td除外）。 以下代码使我无法选择具有输入字段的td ：

$(".table-row td:not(:has(input))").click(function(){...}

但是我无法访问另一个td的值。

是什么原因引起的？ 我如何可以选择所有td除了特定的td ？

.html

<tr data-id="{{ test.id }}" class="table-row">
 <td class="form-check">
  <div class="form-check">
   <label class="form-check-label">
    <input class="form-check-input check-ele check-prevent" type="checkbox" value="">
    <span class="form-check-sign">
     <span class="check"></span>
    </span>
   </label>
  </div>
 </td>
 <td>{{ forloop.counter }}</td>
 <td name="test_name">{{ test.test_name}}</td>
 <td name="test_type">{{ test.test_type}}</td>
 <td name="test_date">{{ test.test_date|date:"m/d/Y" }}</td>  
</tr>  

jQuery的

$(".table-row td:not(:has(input))").click(function(){
  $('#editModal').modal('show');
  let row = $(this).closest('tr').attr('data-id');
  var test_name = $(this).find('td[ name="test_name" ]').text();
  console.log(typeof(test_name));
  // return empty test_name. The row I click on has test_name with value `Entrance Exam`
  var test_type = $(this).find('td[ name="test_type" ]').text();
  var test_date = $(this).find('td[ name="test_date" ]').text();
  var date = new Date(test_date);
  var day = ("0" + date.getDate()).slice(-2);
  var month = ("0" + (date.getMonth() + 1)).slice(-2);
  var test_date = date.getFullYear()+"-"+(month)+"-"+(day) ;
  $('#edit_test_date').val(test_date);
  $("#edit_test_name").val(test_name);
  $("#edit_test_type").val(test_type);

Answer 1

您的选择器工作正常，如下面的示例所示，但是您错误地访问了其他<td>的值 。 这是另一种方法：

 const cells = $(".table-row td:not(:has(input))"); cells.click((e) => { const row = e.target.parentElement; const [ name, type, date ] = Array.from(row.children).slice(2).map(cell => cell.getAttribute('name')); console.log(`NAME = ${ name }, TYPE = ${ type }, DATE = ${ date }`) }); 

 table { border-collapse: collapse; border: 3px solid black; width: 100%; text-align: center; font-family: monospace; } td { padding: 10px 20px; } td:not(:first-child) { cursor: pointer; border-left: 3px solid black; } td:not(:first-child):hover { background: yellow; } .as-console-wrapper { max-height: 44px !important; } 

 <table> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter1">Counter 1</td> <td name="name1">Name 1</td> <td name="type1">Type 1</td> <td name="date1">Date 1</td> </tr> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter2">Counter 2</td> <td name="name2">Name 2</td> <td name="type2">Type 2</td> <td name="date2">Date 2</td> </tr> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter3">Counter 3</td> <td name="name3">Name 3</td> <td name="type3">Type 3</td> <td name="date3">Date 3</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

您的代码中的问题在这里：

let row = $(this).closest('tr').attr('data-id');
var test_name = $(this).find('td[ name="test_name" ]').text();

您应该选择实际的行（ <tr> ）而不是其data-id属性，然后使用该row查找不同的单元格及其name属性的值：

const row = $(this).closest('tr');
const test_name = row.find('td[name="name1"]').text();