我有2个选择框,其中有来自数据库的id
表。现在,我想根据选择框的值来检查具有相同id的td的复选框(该复选框在td标签内)。
如果第一个选择框的值为2,第二个复选框的值为4,则将选中从td id = 2到ts id = 4的复选框,以便我可以下载所选的行
我正在使用数据表和数据表按钮,数据表复选框
这是我在这里用静态值替换mysql值的代码
$(document).ready(function() {
$('#example').DataTable({
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
dom: 'Bfrtip',
buttons: [
'excel', 'pdf',
{
extend: 'excel',
text: 'Download Selected',
exportOptions: {
modifier: {
selected: true
}
},
},
],
order: [[ 1, 'asc' ]]
});
} );
<!--- to select the checkboxes code -->
$(document).ready(function(){
var frm;
var to;
$("#from").change(function(){
frm= $("#from").val();
});
$("#to").change(function(){
to= $("#to").val();
});
$('#selectit').on('click',function(){
for(var i=frm;i<=to;i++)
{
if(i == $('.sel-val').attr('id'))
{
//check the checkox if td id matched
}
}
});
});
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3 form-group">
<label>Select From</label>
<select id="from" class="form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-md-3 form-group">
<label>Select To</label>
<select id="to" class="form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="col-md-3 form-group">
<button type="button" id="selectit" class="btn btn-primary">Check
Selected</button>
</div>
</div>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td id=1 class="sel-val"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td id=2 class="sel-val"></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td id=3 class="sel-val"></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td id=4 class="sel-val"></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td id=5 class="sel-val"></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td id=6 class="sel-val"></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>