[英]jquery selector inside a table td
here is my html code wordpress that makes a table in my plugin dash page: 这是我的HTML代码wordpress,可在我的插件破折页中创建表格:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td: 用我的jQuery代码,我想选择此文本仅在td内选择 :
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me? 我是怎么了?
You need to select text node by filtering them by nodeType. 您需要通过按nodeType过滤文本节点来选择文本节点。 and then wrap the content in dom element with css display none: 然后用CSS显示内容将内容包装在dom元素中:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
You cannot apply hide on text() - you apply it on an HTML Element 您无法在text()上应用hide-在HTML元素上应用hide
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working 多数民众赞成在导致JS错误,因此此后其他任何语句都无法正常工作
and the same is true for val().hide() - A JS Error will be thrown
the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() { var columnmTo=$(this).parent("th").next("td").next("td"); columnmTo.find('.selectedTest').addClass('highlight'); columnmTo.find('.error').hide(); columnmTo.find('.row-actions').hide(); });
span.highlight { font-weight:bold; } span.error { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="wp-list-table widefat fixed exams"> <thead></thead> <tfoot></tfoot> <tbody id="the-list" data-wp-lists="list:exam"> <tr class="alternate"> <th class="check-column" scope="row"> <input class="exam_cb" type="checkbox" value="22" name="exam[]"></input> </th> <td class="ID column-ID"></td> <td class="exam_name column-exam_name"> <span class="selectedTest">this text is to be selected</span> <span class="error">Hello</span> <div class="row-actions"> <span class="subjects">a</span> <span class="settings">b</span> <span class="clone">c</span> <span class="users">c</span> <span class="uploads">d</span> </div> </td> <td class="total_user column-total_user"></td> <td class="date_create column-date_create"></td> <td class="short_code column-short_code"></td> </tr> <tr></tr> <tr class="alternate"></tr> <tr></tr> <tr class="alternate"></tr> <tr></tr> <tr class="alternate"></tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.