Question

我有一个HTML表，如下图所示。它是通过PHP数据库中的MySQL生成的。使用Jquery和JScript，我能够检查所有行＆＃34;或者＆＃34;取消选中所有行＆＃34;使用标有＆＃34; A＆＃34;。

的方框

Example Screenshot picture

我想要实现的是通过选中相应的框（例如标记为＆＃34; B＆＃34;的那个），能够选择特定列（例如，女性）出现在特定列中的所有行。。删除此框中的复选标记将删除＆＃34;女性＆＃34;中的所有复选标记。行。

执行此操作的能力很重要，因为实际表包含3500多行。

Answer 1

尝试下面。

在我的示例中，我只按性别排序，为了按位置过滤，您可以在数据属性中添加它们并相应地修改jquery

＆＃13;

$(function(){
		$('input[type="checkbox"]').click(function(){
			$('table tr').find('td:eq(0) input[type="checkbox"]').prop('checked', false);
            $('div>input[type="checkbox"]').not(this).attr('checked', false)
			var gender = $(this).val().toLowerCase();
			$('table tr[data-sex="'+gender+'"').find('td:eq(0) input[type="checkbox"]').prop('checked', true);
		})
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped">
            <tr>
                <td>#</td>
                <td>ID</td>
				<td>Name</td>
				<td>Gender</td>
				<td>Location</td>
				<td>Hobby</td>
            </tr>
            <tr data-sex="female">
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>Ancy</td>
				<td>Female</td>
				<td>NY</td>
				<td>Footbal</td>
			</tr>
            <tr data-sex="male">
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>Anto</td>
				<td>Male</td>
				<td>CA</td>
				<td>Chess</td>
			</tr>
            <tr data-sex="female">
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>Pamela</td>
				<td>Female</td>
				<td>NY</td>
				<td>Basket Ball</td>
			</tr>
            <tr data-sex="male">
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>William</td>
				<td>Male</td>
				<td>LA</td>
				<td>Sleeping</td>
			</tr>
            <tr data-sex="female">
                <td><input type="checkbox" /></td>
                <td>1</td>
                <td>monica</td>
				<td>Female</td>
				<td>NY</td>
				<td>Eating</td>
			</tr>
        </table>
    </div>
	<div style="clear:both;"></div>
	<div>
		<input type="checkbox" value="Male">&nbsp;Male
		<input type="checkbox" value="Female">&nbsp;Female
	</div>
</div>

＆＃13;

Answer 2

行，

服务器端（php）输出复选框的标记：

 <input type="checkbox" data-gender="female" />

然后是客户端，当有人勾选“女性”复选框时，执行以下操作：

var checkedState = ... //get state to set,

$('.tableClassName input[checkbox]').each(function(index, item) {
  var jqItem = $(item);
  if(jqItem.data('gender') === 'female') {
    jqItem.attr('checked', checkedState);
  }
})

在html表中按值检查/取消选中行

2 个答案: