这是我的HTML代码：
<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
这是我在表格中完成了一个JSON转储：
$("#datatable-buttons").DataTable({
dom: "Bfrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm"
},
{
extend: "print",
className: "btn-sm"
},
],
"aaData": [
{
"Name": "Tiger Nixon",
"Position": "System Architect",
"Office": "$320,800",
"Age": "2011/04/25",
"Start date": "Edinburgh",
"Salary": "5421"
},
{
"Name": "Garrett Winters",
"Position": "Accountant",
"Office": "$170,750",
"Age": "2011/07/25",
"Start date": "Tokyo",
"Salary": "8422"
},
{
"Name": "Ashton Cox",
"Position": "Junior Technical Author",
"Office": "$86,000",
"Age": "2009/01/12",
"Start date": "San Francisco",
"Salary": "1562"
},
{
"Name": "Cedric Kelly",
"Position": "Senior Javascript Developer",
"Office": "$433,060",
"Age": "2012/03/29",
"Start date": "Edinburgh",
"Salary": "6224"
}
],
"aoColumns": [
{ "mData": "Name" },
{ "mData": "Position" },
{ "mData": "Office" },
{ "mData": "Age" },
{ "mData": "Start date" },
{ "mData": "Salary" }
],
responsive: true
});
}
这是我的JQuery代码：
$(document).on('click', '#datatable-buttons tbody tr', function()
{
if ($(this).hasClass('bg-info'))
{
counter--;
if(counter == 0)
{
$("#actions").html("");
}
else if(counter == 1)
{
var val1 = $(this).closest("tr").children(":first").text();
var idx = $.inArray(val1, dataId);
if (idx == -1)
{
dataId.push(val1);
}
else
{
dataId.splice(idx, 1);
}
console.log(dataId);
$("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button> <button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button> <button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
}
else if(counter > 1)
{
var val1 = $(this).closest("tr").children(":first").text();
var idx = $.inArray(val1, dataId);
if (idx == -1)
{
dataId.push(val1);
}
else
{
dataId.splice(idx, 1);
}
console.log(dataId);
$("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
}
$(this).removeClass('bg-info');
}
else
{
counter++;
if(counter == 0)
{
$("#actions").html("");
}
else if(counter == 1)
{
var val1 = $(this).closest("tr").children(":first").text();
var idx = $.inArray(val1, dataId);
if (idx == -1)
{
dataId.push(val1);
}
else
{
dataId.splice(idx, 1);
}
console.log(dataId);
$("#actions").html("<button class='btn btn-primary'><i class='glyphicon glyphicon-eye-open'></i></button> <button class='btn btn-warning'><i class='glyphicon glyphicon-edit'></i></button> <button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
}
else if(counter > 1)
{
var val1 = $(this).closest("tr").children(":first").text();
var idx = $.inArray(val1, dataId);
if (idx == -1)
{
dataId.push(val1);
}
else
{
dataId.splice(idx, 1);
}
console.log(dataId);
$("#actions").html("<button class='btn btn-danger'><i class='glyphicon glyphicon-trash'></i></button>");
}
else
{
//
}
$(this).addClass('bg-info');
console.log(dataId);
}
});
// $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function()
// {
// var specificValue = $(this).closest("tr").children(":first").text();
// alert("Edit Clicked For " + specificValue);
// });
// $(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function()
// {
// $(this).closest("tr").remove().slideUp("slow");
// });
我想要实现的是我创建了一个数组dataId，其中我想要按下当前行的值，然后再单击一行，我想检查值是否存在或如果值存在则不然后从数组中删除该元素，如果不存在则添加它。
目前我已经实现了一个代码，但每当我点击一行时它会添加两次值。
可能是代码问题。任何帮助赞赏。 _ / _