根据范围选择复选框

时间:2018-07-02 06:53:20

标签: jquery datatable

我有2个选择框,其中有来自数据库的id表。现在,我想根据选择框的值来检查具有相同id的td的复选框(该复选框在td标签内)。

例如:

如果第一个选择框的值为2,第二个复选框的值为4,则将选中从td id = 2到ts id = 4的复选框,以便我可以下载所选的行

PS

我正在使用数据表和数据表按钮,数据表复选框

这是我在这里用静态值替换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>

0 个答案:

没有答案