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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com