个人中心
gpt4 book ai didi

jquery - 将数据表复选框替换为我的自定义复选框

转载 作者：行者123 更新时间：2023-12-01 08:41:25 25 4
gpt4 key购买 nike

我得到了双复选框，一个来自数据表框架，另一个是我自己制作的。但我只想使用我制作的一个复选框。因为我已将我的复选框类用于其他工作。因此，请让我知道如何删除数据表内部复选框，并且数据表框架应该与我的自定义复选框交互。有什么想法吗？

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Real App</title>
    
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
        <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>
    
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">
    
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
    
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>
    
        <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
    
    </head>
    
    <body>
    <div class="container">
                    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap no-footer dtr-inline dataTable" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;" cellspacing="0" width="100%">
                        <tbody>
                                <tr role="row" class="pointer odd">
                                    <td>
                                        <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1159" /><br />
    
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img id="ebayImg" src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" width="30%">
                                        <h5><b><a href="http://www.ebay.com/itm/132148971575" id="titleText" value="LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New" id="linkText" target="_blank">LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New</a></b></h5>
    
                                    </td>
                                    <td class="sorting_1" style="text-align:left" width="30%">
                                        <h5><a href="https://www.amazon.com/dp/B06Y6J869C" id="" target="_blank">LG Stylo 3 - Prepaid - Carrier Locked - Boost Mobile</a></h5>
                                    </td>
                                    <td class="sorting_1">
                                        <a href="https://www.amazon.com/dp/B06Y6J869C" target="_blank">B06Y6J869C</a>
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 119.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 119.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        $ -17.7
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        0
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        
                                        <a class="btnWatchList" value="1159" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                        <a class="deleteBulkItem" value="1159"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                                <tr role="row" class="pointer odd">
                                    <td>
                                        <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1158" /><br />
    
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img id="ebayImg" src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" width="30%">
                                        <h5><b><a href="http://www.ebay.com/itm/142129917740" id="titleText" value="HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New</a></b></h5>
    
                                    </td>
                                    <td class="sorting_1" style="text-align:left" width="30%">
                                        <h5><a href="https://www.amazon.com/dp/B01M0OBVW2" id="" target="_blank">HTC One A9 - Retail Packaging (Boost Mobile) - Carrier Locked - Opal Silver</a></h5>
                                    </td>
                                    <td class="sorting_1">
                                        <a href="https://www.amazon.com/dp/B01M0OBVW2" target="_blank">B01M0OBVW2</a>
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 120.91
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 109.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        $ -27.17
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        0
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        
                                        <a class="btnWatchList" value="1158" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                        <a class="deleteBulkItem" value="1158"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                                <tr role="row" class="pointer odd">
                                    <td>
                                        <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1157" /><br />
    
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img id="ebayImg" src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" width="30%">
                                        <h5><b><a href="http://www.ebay.com/itm/252503208819" id="titleText" value="Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate " id="linkText" target="_blank">Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate </a></b></h5>
    
                                    </td>
                                    <td class="sorting_1" style="text-align:left" width="30%">
                                        <h5><a href="https://www.amazon.com/dp/B075YR25TM" id="" target="_blank">JAXPETY Adjustable Weight Bench Barbell Incline Flat Lifting Workout Body Press Home Gym</a></h5>
                                    </td>
                                    <td class="sorting_1">
                                        <a href="https://www.amazon.com/dp/B075YR25TM" target="_blank">B075YR25TM</a>
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 71.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 52.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        $ -26.98
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        0
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        
                                        <a class="btnWatchList" value="1157" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                        <a class="deleteBulkItem" value="1157"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
                                <tr role="row" class="pointer odd">
                                    <td>
                                        <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1152" /><br />
    
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img id="ebayImg" src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" tabindex="0" width="5%">
                                        <ul class="enlarge">
                                            <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                            <!--First Image-->
                                            <li>
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg" height="60px" width="60px">
                                                <span>
                                                    <!--span contains the popup image-->
                                                    <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg">
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="sorting_1" width="30%">
                                        <h5><b><a href="http://www.ebay.com/itm/252193780226" id="titleText" value="Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate" id="linkText" target="_blank">Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate</a></b></h5>
    
                                    </td>
                                    <td class="sorting_1" style="text-align:left" width="30%">
                                        <h5><a href="https://www.amazon.com/dp/B075BHLJN7" id="" target="_blank">JAXPETY Electric Knife Sharpener 2 Stage Kitchen Blade Sharpening System New</a></h5>
                                    </td>
                                    <td class="sorting_1">
                                        <a href="https://www.amazon.com/dp/B075BHLJN7" target="_blank">B075BHLJN7</a>
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 17.59
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="7%">
                                        $ 44.99
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        $ 20.58
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        0
                                    </td>
                                    <td class="sorting_1" style="text-align:left;" width="10%">
                                        
                                        <a class="btnWatchList" value="1152" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                        <a class="deleteBulkItem" value="1152"><i class="fa fa-trash"></i></a>
                                    </td>
                                </tr>
    
    
                        </tbody>
                        <thead>
                            <tr role="row">
                                <th class="column-title"><input type="checkbox" id="checkAll" class="chkAll"></th>
    
                                <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Ebay Image</th>
                                <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Amazon Image</th>
    
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Ebay Title</th>
    
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon Title</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">ASIN</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon price</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">eBay price</th>
    
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Profit</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Sales</th>
                                <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending"></th>
                            </tr>
                        </thead>
                    </table>
    
    
    <!-- <link rel="stylesheet" href="/Remodal/dist/remodal.css" />
    <link rel="stylesheet" href="/Remodal/dist/remodal-default-theme.css" />
    <script src="/Remodal/dist/remodal.min.js"></script>
    
    <script src="/Content/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/Content/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="/Content/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/Content/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/Content/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/Content/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/Content/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="/Content/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script src="/Content/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="/Content/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/Content/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="/Content/vendors/datatables.net-scroller/js/datatables.scroller.min.js"></script>
    <script src="/Content/vendors/jszip/dist/jszip.min.js"></script>
    <script src="/Content/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="/Content/vendors/pdfmake/build/vfs_fonts.js"></script> -->
    
    <script>
        var type_id;
        $('select').change(function () {
            type_id = this.options[this.selectedIndex].parentNode.label;
        });
    
        $(document).ready(function () {
            var table = $('#datatable-responsive').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    //    'copy', 'csv', 'excel', 'pdf', 'print',
                    {
                        extend: 'copy',
                        text: 'copy',
                        exportOptions: {
                            columns: [5, 3, 4, 7, 6],
                            modifier: {
                                selected: true
                            }
                        }
                    },
                    {
                        extend: 'csv',
                        text: 'csv',
                        exportOptions: {
                            columns: [5, 3, 4, 7, 6],
                            modifier: {
                                selected: true
                            }
                        }
                    },
                    {
                        extend: 'excel',
                        text: 'excel',
                        exportOptions: {
                            columns: [5, 3, 4, 7, 6],
                            modifier: {
                                selected: true
                            }
                        }
                    },
                    {
                        extend: 'pdf',
                        text: 'pdf',
                        exportOptions: {
                            columns: [5, 3, 4, 7, 6],
                            modifier: {
                                selected: true
                            }
                        }
                    },
                    {
                        extend: 'print',
                        text: 'print',
                        exportOptions: {
                            modifier: {
                                selected: true
                            }
                        }
                    },
    
                ],
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0,
                    checkboxes: {
                        selectRow: true
                    }
                }],
                select: {
                    style: 'multi',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
    
            });
        });
    
    
        
    </script>
    
    </div>
    </body>
    </html>

最佳答案 

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Real App</title>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>

    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<style>
    table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
      position: static !important;
    }
</style>
</head>

<body>
<div class="container">
                <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap no-footer dtr-inline dataTable" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;" cellspacing="0" width="100%">
                    <tbody>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1159" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/132148971575" id="titleText" value="LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New" id="linkText" target="_blank">LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/com/B06Y6J869C" rel="nofollow noreferrer" id="" target="_blank">LG Stylo 3 - Prepaid - Carrier Locked - Boost Mobile</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/com/B06Y6J869C" rel="nofollow noreferrer" target="_blank">B06Y6J869C</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 119.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 119.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -17.7
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1159" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1159"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1158" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/142129917740" id="titleText" value="HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/com/B01M0OBVW2" rel="nofollow noreferrer" id="" target="_blank">HTC One A9 - Retail Packaging (Boost Mobile) - Carrier Locked - Opal Silver</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/com/B01M0OBVW2" rel="nofollow noreferrer" target="_blank">B01M0OBVW2</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 120.91
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 109.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -27.17
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1158" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1158"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1157" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/252503208819" id="titleText" value="Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate " id="linkText" target="_blank">Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate </a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/com/B075YR25TM" rel="nofollow noreferrer" id="" target="_blank">JAXPETY Adjustable Weight Bench Barbell Incline Flat Lifting Workout Body Press Home Gym</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/com/B075YR25TM" rel="nofollow noreferrer" target="_blank">B075YR25TM</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 71.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 52.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -26.98
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1157" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1157"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1152" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/252193780226" id="titleText" value="Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate" id="linkText" target="_blank">Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/com/B075BHLJN7" rel="nofollow noreferrer" id="" target="_blank">JAXPETY Electric Knife Sharpener 2 Stage Kitchen Blade Sharpening System New</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/com/B075BHLJN7" rel="nofollow noreferrer" target="_blank">B075BHLJN7</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 17.59
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 44.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ 20.58
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1152" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1152"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>


                    </tbody>
                    <thead>
                        <tr role="row">
                            <th class="column-title"><input type="checkbox" id="checkAll" class="chkAll"></th>

                            <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Ebay Image</th>
                            <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Amazon Image</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Ebay Title</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon Title</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">ASIN</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon price</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">eBay price</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Profit</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Sales</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending"></th>
                        </tr>
                    </thead>
                </table>


<!-- <link rel="stylesheet" href="/Remodal/dist/remodal.css" />
<link rel="stylesheet" href="/Remodal/dist/remodal-default-theme.css" />
<script src="/Remodal/dist/remodal.min.js"></script>

<script src="/Content/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/Content/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/Content/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/Content/vendors/datatables.net-scroller/js/datatables.scroller.min.js"></script>
<script src="/Content/vendors/jszip/dist/jszip.min.js"></script>
<script src="/Content/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/Content/vendors/pdfmake/build/vfs_fonts.js"></script> -->

<script>
    var type_id;
    $('select').change(function () {
        type_id = this.options[this.selectedIndex].parentNode.label;
    });

    $(document).ready(function () {
        var table = $('#datatable-responsive').DataTable({
            dom: 'Bfrtip',
            buttons: [
                //    'copy', 'csv', 'excel', 'pdf', 'print',
                {
                    extend: 'copy',
                    text: 'copy',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'csv',
                    text: 'csv',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'excel',
                    text: 'excel',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'pdf',
                    text: 'pdf',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'print',
                    text: 'print',
                    exportOptions: {
                        modifier: {
                            selected: true
                        }
                    }
                },

            ],
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
                checkboxes: {
                    selectRow: true
                }
            }],
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]

        });
    });



</script>

</div>
</body>
</html>

关于jquery - 将数据表复选框替换为我的自定义复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46582968/

25 4 0
文章推荐： python - 如何在 python 中构建网络流？
文章推荐： content-management-system - 什么cms可以支持多种语言？
文章推荐： python - 有没有办法使用 openpyxl 读取没有工作簿的 Excel 文件？
文章推荐： apache-flex - DataProvider 更新时 DataGrid 刷新
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com