I have a table in which there is button in last cell of each row when i click on that button the values of other cells in the same row stored in an array now i want if i click on button the values of it rows should stored in an array which is working but if i click on another button of the other row the values of its rows should store in another array not overwirte the values in first array and when i click the button 3rd time in another row it should give the message "you have selected 2 row"
I don't want that if 3rd time i click button it shouldn't store its values in any array
and I want first and second click should store their corresponding values in different arrays
$('#tbl tbody').on( 'click', 'td:last-child', function (e) {
var row = $(this).parent().parent().children().index($(this).parent());
var datas=[];
var data=[];
var imgs=[];
var img=[];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length-2; i++) {
img = cells[i].querySelector('img');
if(img){
data.push(img.src);
}else{
data.push(cells[i].innerHTML);}
}
}
});
In this when i click on the button which in last cell of each row then I get the values of the corresponding cells in same row
This is code of my table
<table id="tbl" class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Auth Provider</th>
<th scope="col">Auth Unique Id</th>
<th scope="col">Match Id</th>
<th scope="col">Game Mode</th>
<th scope="col">Character 1</th>
<th scope="col">Character 2</th>
<th scope="col">Character 3</th>
<th scope="col">Character 4</th>
<th scope="col">Character 5</th>
<th scope="col">Character 6</th>
<th scope="col">Match Time</th>
<th scope="col">Action</th>
<th scope="col">Schedule Match</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function() {
var trHTML = "";
$.ajax({
url: '../php/admin/schedule_match.php',
type: 'post',
data: {},
success: function(response) {
var data = $.parseJSON(response);
var table;
//table.clear();
table = $('#tbl').DataTable();
table.clear();
if(data!='') {
$.each(data, function(i, item) {
table.row.add([ data[i].name, data[i].provider,data[i].auth,data[i].mid,data[i].mode,'<img width="100px" height= "70px" src=' + data[i].p1 + '>','<img width="100px" height= "70px" src=' + data[i].p2 + '>','<img width="100px" height= "70px" src=' + data[i].p3 + '>','<img width="100px" height= "70px" src=' + data[i].p4 + '>','<img width="100px" height= "70px" src=' + data[i].p5 + '>','<img width="100px" height= "70px" src=' + data[i].p6 + '>',data[i].time,'<button class="btn btn-primary delete" data-id-id=' + data[i].id + '>Delete</button>','<button class="btn btn-primary schedule" data-id-id=' + data[i].id + '>Schedule</button>']);
});
table.draw();
}
}
})
});
Please try this, the data will be saved in selected variable key = tr index and value equal array list of tr child values,
$(function() {
var selected = { };
$('#tbl tbody').on( 'click', 'td:last-child', function (e) {
var index = $(this).closest("tr").index();
if(Object.keys(selected).length == 2 ){
alert("You can selecto two only");
return;
}
if( selected.hasOwnProperty(index)){
alert("You have already select this");
return;
}
var children = $(this).closest("tr").children();
var childData = [];
selected[index] = [];
for (var i = 0; i < children.length-2; i++) {
img = children[i].querySelector('img');
if(img){
childData.push(img.src);
}else{
childData.push(children[i].innerHTML);}
}
selected[index] = childData ;
console.log(selected);
});
});
the output like this
{
0: ["123", "asd", "123343", "asd"] ,
2: ["13234", "asd", "123343", "asd"]
}
to get the selected values
Object.values(selected) // [ ["123", "asd", "123343", "asd"] , ["13234", "asd", "123343", "asd"] ]
to get the selected tr indexes
Object.keys(selected) // [ 0 , 2 ]
Code will check if the user select more than two rows it will alert , you can change it, if user select two and clicked on row selected before it will not get any alert, you can delete && !selected.hasOwnProperty(index) to alert what ever this selected or not.
Related
I have a table and I want to clone the last line of it after the [Add New] link is pressed. The table has 8 columns. When I press the [Add New] link, only the first 3 column has the same value like the one above it. The delete function is also unable to delete row.
Here is the page when it loads.
Now, I key in values for PX, Date, and Place:
Then, when i click on the [Add New] link, new row appeared below. But only 3 columns are populated:
I want the row below to clone exactly the values from the previous row.
Here's the code of the table:
<div style="width:700px; padding:5px; background-color:white;">
#using (Html.BeginForm("PxDataEntry", "PxAndTitle", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
if (ViewBag.Message != null)
{
<div style="border:solid 1px green">
#ViewBag.Message
</div>
}
<div>+ Add New</div>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>PX</th>
<th>Date</th>
<th>Place</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
#if (Model != null && Model.Count > 0)
{
int j = 0;
foreach (var i in Model)
{
<tr style="border:1px solid black">
<td>#Html.TextBoxFor(a => a[j].px)</td>
<td>#Html.TextBoxFor(a => a[j].sDate)</td>
<td>#Html.TextBoxFor(a => a[j].Place)</td>
<td>#Html.TextBoxFor(a => a[j].PId)</td>
<td>#Html.TextBoxFor(a => a[j].FId)</td>
<td>#Html.TextBoxFor(a => a[j].createdBy)</td>
<td>#Html.TextBoxFor(a => a[j].createdAt)</td>
<td>#Html.TextBoxFor(a => a[j].PxStatus)</td>
<td>
#if (j > 0)
{
Remove
}
</td>
</tr>
j++;
}
}
</table>
<input type="submit" value="Save Bulk Data" />
}
Here is the script:
#section Scripts{
#Scripts.Render("~/bundles/jqueryval")
<script language="javascript">
$(document).ready(function () {
//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('Remove');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
// Re-assign Validation
var form = $("form")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
});
// 2. Remove
$('a.remove').live("click", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
}
First issue is because you empty your inputs values which are cloned i.e : $(this).attr('value', ''); remove this line if you need values as well from your previous trs .Then, onclick of a tag you can simply use .closest("tr") to remove entire tr from table .
Demo Code :
$(document).ready(function() {
//1. Add new row
$("#addNew").click(function(e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('Remove');
$.each($trNew.find(':input'), function(i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
//this line empty value of inputs
// $(this).attr('value', '');
}
// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");
});
$trLast.after($trNew);
})
$(document).on("click", "a.remove", function(e) {
e.preventDefault();
$(this).closest("tr").remove(); //remove closest trs
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>PX</th>
<th>Date</th>
<th>Place</th>
<th></th>
<th></th>
</tr>
<tr style="border:1px solid black">
<td><input type="text" name="a[0]"></td>
<td><input type="text" name="sDate[0]"></td>
<td><input type="text" name="Place[0]" value="somthing"></td>
<td><input type="text" name="Pid[0]" value="1"></td>
<td>
Remove
</td>
</tr>
</table>
<button id="addNew">Add</button>
I have an HTML table that has some static data and some from MySQL. It is currently filtering properly, what I need help is adding the "yes" and "no" selections to the selection list. These are just test values, they are being read from MySQL. I am unable to figure out what values to insert here to add values from MySQL to the selection list. Any assistance will be appreciated! Thank you
.append($table.find('tbody tr')
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Filter</title>
</head>
<script>
$.ajax({
url: 'http://localhost:7003/getTable',
type: "get",
dataType: "json",
success: function(data) {
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
</script>
</body>
</html>
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="dropdown-header">Age</th>
<th>Email</th>
<th class="dropdown-header">Gender</th>
<th class="dropdown-header">Term</th>
<th class="dropdown-header">Enrolled</th>
</tr>
</thead>
<tbody>
<script>
function drawRow(rowData) {
var row = $("<tr />")
$("#myTable").append(row);
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td>').attr('data-field-name', 'age').text(rowData.County));
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td data-field-name="gender">' + rowData.County + '</td>'));
row.append($('<td data-field-name="term">' + rowData.County + '</td>'));
row.append($('<td data-field-name="enrolled">' + rowData.County + '</td>'));
}
</script>
<tr>
<td>John</td>
<td>Smith</td>
<td data-field-name="age">15</td>
<td>123</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Summer2017</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-field-name="age">16</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2019</td>
</tr>
<tr>
<td>Bobby</td>
<td>Adams</td>
<td data-field-name="age">15</td>
<td>789</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Spring2019</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Sarah</td>
<td>Lee</td>
<td data-field-name="age">15</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
</tbody>
</table>
<script>
(function($) {
$.fn.tableFilterHeaders = function(filterFn) {
this.each((index, header) => {
let $header = $(header),
$table = $header.closest('table'),
text = $header.text(),
colIndex = $header.closest('th').index(),
fieldName = $header.attr('data-field-name') || text.toLowerCase(),
$select = $('<select>')
.data('fieldName', fieldName)
.append($('<option>').text(text).val('').prop('disabled', true))
.append($('<option>').text('All').val('all'))
.append($table.find('tbody tr')
.toArray()
.map(tr => {
return $(tr).find(`td:eq(${colIndex})`).text();
})
.filter(text => text.trim().length > 0)
.sort()
.filter((v, i, a) => a.indexOf(v) === i)
.map(text => {
return $('<option>').text(text).val(text);
}));
$header.empty().append($select.val('').on('change', filterFn));
});
};
$.fn.initRowClasses = function(oddCls, evenCls) {
this.find('tbody tr').each(function(i) {
$(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
});
};
$.fn.updateRowClasses = function(oddCls, evenCls) {
this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
};
})(jQuery);
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
function filterText(e) {
let $filter = $(e.target),
$table = $filter.closest('table'),
$filters = $table.find('.dropdown-header select'),
filterObj = $filters.toArray().reduce((obj, filter) => {
let $filter = $(filter);
return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
}, {});
if ($filter.val() === 'all') {
$filter.val('')
}
$table.find('tbody tr').each(function() {
$(this).toggle($(this).find('td').toArray().every(td => {
let $td = $(td), fieldName = $td.attr('data-field-name');
if (fieldName != null) {
return filterObj[fieldName] === null ||
filterObj[fieldName] === '' ||
filterObj[fieldName] === 'all' ||
filterObj[fieldName] === $td.text();
}
return true;
}));
});
$table.updateRowClasses('odd', 'even');
}
</script>
Not showing yes and no options.
Your filtering logic and odd/even row coloring logic is called BEFORE the data returns from your ajax even though it appears AFTER on the page/code. This is how async methods work.
You need to call the header and coloring logic inside the drawTable() function after, of course, you are done drawing the table... like this:
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
}
Make sure to remove the foloowing 2 lines of code:
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
from your code, wherever elsewhere they appear. Leaving them will not break anything, it will just run multiple times unnecessary.
i have a table that i compare row values using checkbox to see if they are the same, am using a jquery code to compare the table rows that were selected by a checkbox, it works perfectly, now what i want is to be able to exclude two columns from the comparison and compare other columns in the two selected rows
$('.ApprovalForm').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
if ($(":checkbox:checked").length < 2 || $(":checkbox:checked").length > 2) {
alert('You have to select two flights');
} else {
var form = $(this);
//get all checkboxes that are selected
var selected = $("input:checked");
//loop through your columns
var x = 0;
for (var i = 1; i <= 17; i++) {
var prev = null;
$.each($(selected), function() {
var curr = $(this).closest("tr").find("td").eq(i).text();
//if at least one value is different highlight the column
if (curr !== prev && prev !== null) {
x++;
console.log(3333);
}
prev = curr;
})
}
console.log(x);
if (x <= 0) {
$("#modal-Approve").modal('show');
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
}).done(function(response) {
$("#MessageStatus ").val(response);
location.reload();
}).fail(function(data) {
// Optionally alert the user of an error here...
alert(data);
});
} else {
alert('Selected flights are not the same, check if they are the same by using detail button');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th style="display:none">id</th>
<th>Mission</th>
<th>First Pilot</th>
<th>Second Pilot</th>
<th>Aircraft</th>
<th>No</th>
<th style="display:none">TakeOffTime</th>
<th style="display:none">LandingTime</th>
<th style="display:none">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:20</td> <!-- exclude this from the values that will be compared -->
<td>12/1/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
<tr>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:30</td> <!-- exclude this from the values that will be compared -->
<td>12/2/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
</tbody>
</table>
so the idea is to be able to exclude some td values from the comparison
Add 'exc_toggle' class to each th in your header row
Add event listener for clicking these classes to toggle an 'exclude' data attribute
Add a hidden cell to each row in tbody so your column counts are the same between the header and tbody rows
Add to your form submit event listener to iterate over the 'exc_toggle' class and create a to_ignore index for each data-exclude = 1
Skip your comparison when i is found in your ignore index
Code below.
HTML:
<table>
<thead>
<tr id="header_row">
<th style="display:none" class="exc_toggle">id</th>
<th class="exc_toggle">Mission</th>
<th class="exc_toggle">First Pilot</th>
<th class="exc_toggle">Second Pilot</th>
<th class="exc_toggle">Aircraft</th>
<th class="exc_toggle">No</th>
<th class="exc_toggle">TakeOffTime</th>
<th class="exc_toggle">LandingTime</th>
<th class="exc_toggle">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none"></td>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:20</td> <!-- exclude this from the values that will be compared -->
<td>12/1/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
<tr>
<td style="display:none"></td>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:30</td> <!-- exclude this from the values that will be compared -->
<td>12/2/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
</tbody>
</table>
jQuery (in document header):
$(document).on('click', '.exc_toggle', function(){
if($(this).data('exclude') == 1)
{
$(this).data('exclude', 0);
$(this).css('background-color', '');
} else {
$(this).data('exclude', 1);
$(this).css('background-color', '#F00');
}
});
jQuery (modified ApprovalForm submit event):
$('.ApprovalForm').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
if ($(":checkbox:checked").length < 2 || $(":checkbox:checked").length > 2) {
alert('You have to select two flights');
} else {
var ignore_indices = [];
var cnt = 0;
$('.exc_toggle').each(function(){
if($(this).data('exclude') == 1)
{ignore_indices.push(cnt);}
cnt++;
});
var form = $(this);
//get all checkboxes that are selected
var selected = $("input:checked");
//loop through your columns
var x = 0;
for (var i = 1; i <= 17; i++) {
if(ignore_indices.indexOf(i) < 0)
{
var prev = null;
$.each($(selected), function() {
var curr = $(this).closest("tr").find("td").eq(i).text();
//if at least one value is different highlight the column
if (curr !== prev && prev !== null) {
x++;
console.log(3333);
}
prev = curr;
})
} else {
prev = null;
}
}
console.log(x);
if (x <= 0) {
$("#modal-Approve").modal('show');
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
}).done(function(response) {
$("#MessageStatus ").val(response);
location.reload();
}).fail(function(data) {
// Optionally alert the user of an error here...
alert(data);
});
} else {
alert('Selected flights are not the same, check if they are the same by using detail button');
}
}
});
To compare duplicate takeoff times, add the class 'takeoff' to each td in your takeoff time column, then add this jQuery:
$(document).on('change', 'input:checkbox', function(){
var takeoff = '';
$('.takeoff').css('background-color', '');
$('input:checked').each(function(){
var td_target = $(this).closest('tr').find('.takeoff');
takeoff = td_target.html();
var matches = $('input:checked').parents('tr').find('.takeoff:contains("'+takeoff+'")');
if(matches.length > 1)
{td_target.css('background-color', '#F00');}
else
{td_target.css('background-color', '');}
});
});
JSP
<table class="countrys" data-name="tableProductsBuy">
<tr bgcolor="lightgrey">
<th>Product ID</th>
<th>Product Name</th>
<th>In Store</th>
</tr>
<tr data-ng-repeat="p in finalList"
data-ng-click="selectObject(p, $index);"
data-ng-class="getSelectedObject(p);">
<td>{{p.product.productId}}</td>
<td>{{p.product.productName}}</td>
<td>{{p.unitsOutStore}}</td>
</tr>
</table>
<button data-ng-click="buyIt()">Add to Shopping Cart</button>
controller
$scope.getSelectedObject = function(object) {
if ($scope.selectedObject.product.productId != undefined) {
if ($scope.selectedObject.product.productId == object.product.productId) {
return "selected";
}
}
return "";
};
$scope.selectObject = function(object, index){
$scope.selectedObject = object;
}
$scope.finalList = [];
$scope.theListB = [];
$scope.counter = 0;
$scope.priceOfProducts = 0;
$scope.buyIt = function(){
if ($scope.selectedProduct.unitsInStore>0){
$scope.selectedProduct.unitsInStore--;
$scope.theListB.push($scope.selectedProduct);
$scope.priceOfProducts += $scope.selectedProduct.pricePerUnit;
}else{
alert("The product ID:" + $scope.selectedProduct.productId +"\n" +
"With the name:" + $scope.selectedProduct.productName + "\n"
+"Is out of stock!");
}
$scope.showList();
}
$scope.showList=function(){
$scope.finalList = [];
angular.forEach($scope.theListB, function(productFromListB, key){
var go = true;
angular.forEach($scope.allSProducts, function(productFromStores, key){
if(productFromListB.productId == productFromStores.productId){
// if(go){
$scope.object.product = productFromListB;
$scope.object.unitsOutStore = productFromStores.unitsInStore - productFromListB.unitsInStore;
$scope.object.maxNumber = productFromStores.unitsInStore;
$scope.finalList.push($scope.object);
go = false;
// }
}
});
});
}
so in the end, i got the function $scope.showList()
there i have theListB filed with my 10 or more objects
that data i modify and add to finalList with this line:
$scope.finalList.push($scope.object);
but on the jsp page, it only shows the last added object in the table row
in ng-repeat...
any sugestions?
Here a pic
enter image description here
i am writing a code to select/remove the product from display table, and when the product is selected,then product with its price mus be displayed in some other table where at the end sum total is also needed which get updated as per selected product prices
<table id="table-example" class="table">
<thead>
<tr>
<th>Cause</th>
<th>Monthly Charge</th>
</tr>
</thead>
<tbody>
<tr>
<div id="selectedServices"></div>
<td id="myDiv"></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table id="table-example" class="table">
<thead>
<tr>
<th>Cause</th>
<th>Monthly Charge</th>
</tr>
</thead>
<div>
<tbody>
<p>
<tr>
<td>
<input type="checkbox" onclick="ToggleBGColour(this);" />
<label>table</label>
</td>
<td>80</td>
</tr>
<tr>
<td>
<input type="checkbox" onclick="ToggleBGColour(this);" />
<label>chair</label>
</td>
<td>45</td>
</tr>
<tr>
<td>
<input type="checkbox" onclick="ToggleBGColour(this);" />
<label>set</label>
</td>
<td>10</td>
</tr>
</tbody>
</div>
</table>
script
$(function() {
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() { return $(this).next().text(); }).get();
$("#myDiv").text(arr.join(','));
});
});
function ToggleBGColour(item) {
var td = $(item).parent();
if (td.is('.rowSelected'))
td.removeClass("rowSelected");
else
td.addClass("rowSelected");
}
Here is the corresponding fiddle.
Based on your comment for my other answer, this should work for you then:
$(":checkbox").change(function () {
// Toggle class of selected row
$(this).parent().toggleClass("rowSelected");
// Get all items name, sum total amount
var sum = 0;
var arr = $(":checkbox:checked").map(function () {
sum += Number($(this).parents('tr').find('td:last').text());
return $(this).parents('tr').clone();
}).get();
// Display selected items and their sum
$("#selectedServices").html(arr).find('input').remove();
$("#total").text(sum);
});
This avoids the need for creating new HTML elements in the JavaScript code, and reduces the number of .maps() and .each() loops to one.
http://jsfiddle.net/samliew/uF2Ba/
Here is the javascript for but u need to remove onClick attrs :
$(function() {
$(":checkbox").change(function() {
ToggleBGColour(this);
var arr = $(":checkbox:checked").map(function() {
return $(this).next().text();
}).get();
var nums = $(":checkbox:checked").map(function() {
return parseInt($(this).parent().next().html());
}).get();
var total = 0;
for (var i = 0; i < nums.length; i++) {
total += nums[i] << 0;
}
$("#myDiv").text(arr.join(',') + 'total : '+total);
});
});
function ToggleBGColour(item) {
var td = $(item).parent();
if (td.is('.rowSelected'))
td.removeClass("rowSelected");
else
td.addClass("rowSelected");
}
I updated your fiddle with my answer : http://jsfiddle.net/A2SKr/9/
Here's what i've changed.
Slightly better formatted.
i removed the onclick attribute. Its bad practice to use this because of performance issues. Use delegates
Ive also changed a lil bit of your HTML. the output is now a table
added a total element to the output as well
javascript code :
$(":checkbox").change(function () {
var total = 0;
var check = $(":checkbox:checked");
var causes = check.map(function () {
return $(this).next().text();
}).get();
var costs = check.map(function () {
return $(this).parent().next().text()
}).get();
var tbody = $("#table-example tbody").empty();
$.each(causes, function (i, cause) {
tbody.append("<tr><td>" + cause + "</td><td id='" + i + "'><td/></tr>");
});
$.each(costs, function (i, cost) {
$('#' + i + '').html(cost);
total += parseInt(cost, 10);
});
tbody.append("<tr><td>Total</td><td>" + total + "<td/></tr>");
});
});