我想选择所有td
所单击的tr
,只有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);
答案 0 :(得分:2)
您的选择器工作正常,如下面的示例所示,但是您错误地访问了其他<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
查找不同的单元格及其{{1}的值}属性:
name