Question

我有一张桌子，这张桌子的特点是：

用户列表
一旦用户点击邀请范围，它就会运行一个独特生成的JS。
该表在每行上都有一个选择复选框

我想要实现的目标：

构建全选复选框 - 工作
用户单击“全部添加”按钮后，必须模拟每个范围上按钮的单击，以便在同一行中进行邀请，以便运行相关的js。

然而，我可以无法使用all 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>

checbox的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;                        
        });
    }
});

添加所选按钮功能就像我现在一样

这不起作用，孩子没有识别。

$('#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小提琴： https://jsfiddle.net/Webvelopment/ob1hd3rw/8/#&togetherjs=zMcgQU9zo4

我真的无法弄清楚为什么它没有识别。我也不知道如何模拟点击。

Answer 1

要模拟点击，您只需在目标元素上调用.click()。

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

$('tr').has('.user:checked') - 查找包含已检查tr元素的所有.user

.find('.invitebutton') - 在这些行中，找到类invitebutton

的元素

.click();点击元素

Working jsFiddle

＆＃13;

// 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');
});

＆＃13;

td {
  padding: 5px;
  border: 1px solid gray;
}

＆＃13;

<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>

＆＃13;

选择父级的大孩子 - 将VAR返回为未定义

1 个答案:

Working jsFiddle