javascript - 选择父项的孙子项 - 返回未定义的 VAR

标签 javascript jquery html css

我有一张表，这张表的特点是:

  1. 用户列表
  2. 一旦用户点击了邀请范围，它就会运行一段独特生成的 JS。
  3. 表格的每一行都有一个选择复选框

我想达到什么目的:

  1. 构建一个全选复选框 - 工作
  2. 一旦用户点击添加所有按钮，它必须在邀请的每个 span 上模拟一次点击按钮，以便在同一行中运行相关的 js。

但是我无法让 add all 正常工作。这是代码。

HTML

<table aria-describedby="usersslavetoinvitestable_info" class="dataTable no-footer" id="usersslavetoinvitestable" role="grid">
    <thead>
        <tr role="row">
      <th><input type="checkbox" name="select-all" id="select-all" /></th>
            <th aria-controls="usersslavetoinvitestable" aria-label="User ID: activate to sort column descending" aria-sort="ascending" class="sorting_asc" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">User ID</th>
            <th aria-controls="usersslavetoinvitestable" aria-label="Name: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Name</th>
            <th aria-controls="usersslavetoinvitestable" aria-label="ID: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">ID</th>
            <th aria-controls="usersslavetoinvitestable" aria-label="Client Type: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Client Type</th>
            <th aria-controls="usersslavetoinvitestable" aria-label="Invite: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Invite</th>
        </tr>
    </thead>
    <tbody>
        <tr class="userinvitehide208 odd" role="row">
            <td><input type="checkbox" class="user" name="checkbox-208" id="checkbox-208" /></td>
      <td class="sorting_1">208</td>
            <td>Tester Johnson</td>
            <td>7903225038799</td>
            <td>Investor <span class="multisep">|</span> Golfer <span class="multisep">|</span></td>
            <td class="invite"><span class="invitebutton" id="uid208">Invite Now</span></td>
        </tr>
        <tr class="userinvitehide221 even" role="row">
            <td><input type="checkbox" class="user" name="checkbox-221" id="checkbox-221" /></td>
            <td class="sorting_1">221</td>
            <td>Ruan Pienaar</td>
            <td>8305215038988</td>
            <td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
            <td class="invite"><span id="uid221">Invite Now</span></td>
        </tr>
        <tr class="userinvitehide224 odd" role="row">
            <td><input type="checkbox" class="user" name="checkbox-224" id="checkbox-224" /></td>
            <td class="sorting_1">224</td>
            <td>Kyle Warmback</td>
            <td>7983224869044</td>
            <td>Golfer <span class="multisep">|</span></td>
            <td class="invite"><span class="invitebutton" id="uid224">Invite Now</span></td>
        </tr>
        <tr class="userinvitehide225 even" role="row">
            <td><input type="checkbox" class="user" name="checkbox-225" id="checkbox-225" /></td>
            <td class="sorting_1">225</td>
            <td>Gardiol Lamberts</td>
            <td>8403226038944</td>
            <td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
            <td class="invite"><span class="invitebutton" id="uid225">Invite Now</span></td>
        </tr>
        <tr class="userinvitehide226 odd" role="row">      
            <td><input type="checkbox" class="user" name="checkbox-226" id="checkbox-226" /></td>
            <td class="sorting_1">226</td>
            <td>Ulof Van Der Westhuizen</td>
            <td>8704223949733</td>
            <td>Investor <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
            <td class="invite"><span class="invitebutton" id="uid226">Invite Now</span></td>
        </tr>
    </tbody>
</table>
<br>
<!-- select all boxes -->

<button id="add-all">Add Selected</button>

复选框的 JS 切换所有 - 工作

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
    // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = false;                        
        });
    }
});

我现在有的添加选中按钮功能

这不起作用， child 没有识别。

$('#add-all').click(function(){
        $('.user:checked').each(function () {
    //Log Execute
    console.log('Executed user call');
    //Identify Parent
    var trclass = $(this).parent().parent().attr('class');
    console.log('trclass is ' + trclass);
    //spanid
    var spanid = $(trclass).find('td.invite').find('td.invitebutton').find('span').attr('class');
    console.log('spanid is ' + spanid);
    //Click Button

    })
});

这是我正在处理的 JS Fiddle: https://jsfiddle.net/Webvelopment/ob1hd3rw/8/#&togetherjs=zMcgQU9zo4

我真的想不通为什么不识别。我也不知道如何模拟点击。

最佳答案

要模拟点击，您可以简单地调用 .click()在目标元素上。

至于其余部分，您可以将整个函数体替换为 $('tr').has('.user:checked').find('.invitebutton').click(); :

$('tr').has('.user:checked') -- 找到所有 tr包含选中的 .user 的元素

.find('.invitebutton') -- 在这些行中，找到类别为 invitebutton 的元素

.click();单击元素

Working jsFiddle 

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
    // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = false;                        
        });
    }
});

$('#add-all').click(function(){ 
    $('tr').has('.user:checked').find('.invitebutton').click(); 
});

// just to show it works...
$(document).on('click','.invitebutton',function(){
	console.log('clicked');
});
td {
  padding: 5px;
  border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table aria-describedby="usersslavetoinvitestable_info" class="dataTable no-footer" id="usersslavetoinvitestable" role="grid">
	<thead>
		<tr role="row">
      <th><input type="checkbox" name="select-all" id="select-all" /></th>
			<th aria-controls="usersslavetoinvitestable" aria-label="User ID: activate to sort column descending" aria-sort="ascending" class="sorting_asc" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">User ID</th>
			<th aria-controls="usersslavetoinvitestable" aria-label="Name: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Name</th>
			<th aria-controls="usersslavetoinvitestable" aria-label="ID: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">ID</th>
			<th aria-controls="usersslavetoinvitestable" aria-label="Client Type: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Client Type</th>
			<th aria-controls="usersslavetoinvitestable" aria-label="Invite: activate to sort column ascending" class="sorting" colspan="1" rowspan="1" style="width: 0px;" tabindex="0">Invite</th>
		</tr>
	</thead>
	<tbody>
		<tr class="userinvitehide208 odd" role="row">
			<td><input type="checkbox" class="user" name="checkbox-208" id="checkbox-208" /></td>
      <td class="sorting_1">208</td>
			<td>Tester Johnson</td>
			<td>7903225038799</td>
			<td>Investor <span class="multisep">|</span> Golfer <span class="multisep">|</span></td>
			<td class="invite"><span class="invitebutton" id="uid208">Invite Now</span></td>
		</tr>
		<tr class="userinvitehide221 even" role="row">
			<td><input type="checkbox" class="user" name="checkbox-221" id="checkbox-221" /></td>
			<td class="sorting_1">221</td>
			<td>Ruan Pienaar</td>
			<td>8305215038988</td>
			<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
			<td class="invite"><span id="uid221">Invite Now</span></td>
		</tr>
		<tr class="userinvitehide224 odd" role="row">
			<td><input type="checkbox" class="user" name="checkbox-224" id="checkbox-224" /></td>
			<td class="sorting_1">224</td>
			<td>Kyle Warmback</td>
			<td>7983224869044</td>
			<td>Golfer <span class="multisep">|</span></td>
			<td class="invite"><span class="invitebutton" id="uid224">Invite Now</span></td>
		</tr>
		<tr class="userinvitehide225 even" role="row">
			<td><input type="checkbox" class="user" name="checkbox-225" id="checkbox-225" /></td>
			<td class="sorting_1">225</td>
			<td>Gardiol Lamberts</td>
			<td>8403226038944</td>
			<td>Private Wealth <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
			<td class="invite"><span class="invitebutton" id="uid225">Invite Now</span></td>
		</tr>
		<tr class="userinvitehide226 odd" role="row">      
			<td><input type="checkbox" class="user" name="checkbox-226" id="checkbox-226" /></td>
			<td class="sorting_1">226</td>
			<td>Ulof Van Der Westhuizen</td>
			<td>8704223949733</td>
			<td>Investor <span class="multisep">|</span> Cyclist <span class="multisep">|</span></td>
			<td class="invite"><span class="invitebutton" id="uid226">Invite Now</span></td>
		</tr>
	</tbody>
</table>
<br>
<!-- select all boxes -->

<button id="add-all">Add Selected</button>

关于javascript - 选择父项的孙子项 - 返回未定义的 VAR，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42381931/

上一篇：javascript - 使用 jquery on click 函数将特定字符附加到新的 div

下一篇：jquery - 如何制作一个宽度动态调整的html表格

相关文章：

javascript - 面向对象的 JavaScript 锁

javascript - 如何在不同 View 模型之间的 Knockout 中发出事件

javascript - 如何获取自定义 Azure 应用程序 API 的有效访问 token ？ (MSAL.js)

javascript - 如何在 vuejs 中创建动态 rowpan 表？

jquery - 事件绑定(bind)中的 .data()

javascript - 通过选择从开始日期算起的周数或月数来自动结束日期

jquery - 如何在 paginatorTemplate 中使用 {totalPages}？

html - 我们可以在 <li> 中给 <div>

html - 内容移动高度为 100vh 的内联 block div

javascript - 自动更新对网页上其他标题的引用

©2024 IT工具网  联系我们