I am new to Java Scripting,
Can any one help for the below code. I tried move the selected checkbox row to top of the table.
The code below working for the first time but when I attempt to do again it is not going to top.
here is my JavaScript.
Here I have added the checkboxes dynamically using Javascript.
$(document).on('change', '[type=checkbox]', function () {
alert("Chk box clicked"+ rl);
//var s1 = $(this).context.status;
//var direction = $(this).attr('data-direction');
var $original = $(this).parents("tr:first");
var $target = $(this).context.status === true ? $original.prev() : $original.next();
var firstrw = tblrw.rows[0].innerText;
var lastrw = tblrw.rows[(tblrw.rows.length)-1].innerText
if ($target.length && $(this).context.status == true)
{
//for (var i = $target.length; i <= 0; i--) {
$original.insertBefore($('#chk' + firstrw), ($target));
}
else if ($target.length)
{
$original.insertAfter($target);
}
});
please help as soon as possible.
Thank you in advance for the help.
Basic code:
$('table').on('change', '[type=checkbox]', function () {
var $this = $(this); // refers to checkbox
var row = $this.closest('tr'); // row with changed checkbox
if ( $this.prop('checked') ){ // move to top
row.insertBefore( row.parent().find('tr:first-child') );
}
else { // move to bottom
row.insertAfter( row.parent().find('tr:last-child') );
}
});
Code snippet to run and see how it works. Plus jsfiddle http://jsfiddle.net/51rbk65t/
$('table').on('change', '[type=checkbox]', function () {
var $this = $(this);
var row = $this.closest('tr');
if ( $this.prop('checked') ){ // move to top
row.insertBefore( row.parent().find('tr:first-child') )
.find('label').html('move to bottom');
}
else { // move to bottom
row.insertAfter( row.parent().find('tr:last-child') )
.find('label').html('move to top');
}
});
th, td { border: 1px solid #d4d4d4; }
thead tr { background-color: #F5F5F5; }
tr.c1 { background-color: #D2FFA5; }
tr.c2 { background-color: #FFEFBF; }
tr.c3 { background-color: #FFCDE3; }
tr.c4 { background-color: #CFCDFF; }
tr.c5 { background-color: #CDFFE9; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="c1">
<td>1</td>
<td>Title 1</td>
<td><input type="checkbox" id="c_1" /><label for="c_1">move to top</label></td>
</tr>
<tr class="c2">
<td>2</td>
<td>Title 2</td>
<td><input type="checkbox" id="c_2" /><label for="c_2">move to top</label></td>
</tr>
<tr class="c3">
<td>3</td>
<td>Title 3</td>
<td><input type="checkbox" id="c_3" /><label for="c_3">move to top</label></td>
</tr>
<tr class="c4">
<td>4</td>
<td>Title 4</td>
<td><input type="checkbox" id="c_4" /><label for="c_4">move to top</label></td>
</tr>
<tr class="c5">
<td>5</td>
<td>Title 5</td>
<td><input type="checkbox" id="c_5" /><label for="c_5">move to top</label></td>
</tr>
</tbody>
</table>
Related
I have a 300x11(rowXcolumn) html table that I wanted to filter exactly like Excel or Google Sheets's filter. However, after searching a bit I found out the following code below in a website. This works as I wanted but it has one major problem. It shows same value multiple times. For example in the 2nd column, there are 2 values same "Apple" and 2 whitespaces . In the current code, it displays Apple twice and whitespace twice. However, I want it should show the same values only once. For example, it will show "Apple" only once, and if I select apple it will filter both rows containing apple.
Thank you very much for your help.
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="grid">
<thead>
<tr>
<td index=0>Name
<div class="filter"></div>
</td>
<td index=1>Address
<div class="filter"></div>
</td>
<td index=2>City
<div class="filter"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>second</td>
<td></td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td></td>
<td>SDF hello</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
</tr>
</tbody>
</table>
</body>
</html>
script.js
$(document).ready(function(){
$(".grid thead td").click(function(){
showFilterOption(this);
});
});
var arrayMap = {};
function showFilterOption(tdObject){
var filterGrid = $(tdObject).find(".filter");
if (filterGrid.is(":visible")){
filterGrid.hide();
return;
}
$(".filter").hide();
var index = 0;
filterGrid.empty();
var allSelected = true;
filterGrid.append('<div><input id="all" type="checkbox" checked>Select All</div>');
var $rows = $(tdObject).parents("table").find("tbody tr");
$rows.each(function(ind, ele){
var currentTd = $(ele).children()[$(tdObject).attr("index")];
var div = document.createElement("div");
div.classList.add("grid-item")
var str = $(ele).is(":visible") ? 'checked' : '';
if ($(ele).is(":hidden")){
allSelected = false;
}
div.innerHTML = '<input type="checkbox" '+str+' >'+currentTd.innerHTML;
filterGrid.append(div);
arrayMap[index] = ele;
index++;
});
if (!allSelected){
filterGrid.find("#all").removeAttr("checked");
}
filterGrid.append('<div><input id="close" type="button" value="Close"/><input id="ok" type="button" value="Ok"/></div>');
filterGrid.show();
var $closeBtn = filterGrid.find("#close");
var $okBtn = filterGrid.find("#ok");
var $checkElems = filterGrid.find("input[type='checkbox']");
var $gridItems = filterGrid.find(".grid-item");
var $all = filterGrid.find("#all");
$closeBtn.click(function(){
filterGrid.hide();
return false;
});
$okBtn.click(function(){
filterGrid.find(".grid-item").each(function(ind,ele){
if ($(ele).find("input").is(":checked")){
$(arrayMap[ind]).show();
}else{
$(arrayMap[ind]).hide();
}
});
filterGrid.hide();
return false;
});
$checkElems.click(function(event){
event.stopPropagation();
});
$gridItems.click(function(event){
var chk = $(this).find("input[type='checkbox']");
$(chk).prop("checked",!$(chk).is(":checked"));
});
$all.change(function(){
var chked = $(this).is(":checked");
filterGrid.find(".grid-item [type='checkbox']").prop("checked",chked);
})
filterGrid.click(function(event){
event.stopPropagation();
});
return filterGrid;
}
style.css
table thead tr td{
background-color : gray;
min-width : 100px;
position: relative;
}
.filter{
position:absolute;
border: solid 1px;
top : 20px;
background-color : white;
width:100px;
right:0;
display:none;
}
Maybe someone else will fix that limited JS for you but otherwise use DataTables. It has all you want with extensive documentation, and it's a popular plugin so it's not hard to find any answers to questions you might have about it. Here's an example with everything you desired in your post:
/* Range Search - https://datatables.net/examples/plug-ins/range_filtering.html */
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0;
if (
(isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)
) {
return true;
}
return false;
});
$(document).ready(function() {
/* Init dataTable - Options[paging: off, ordering: off, search input: off] */
var table = $('#table').DataTable({
"paging": false,
"ordering": false,
dom: 'lrt'
});
/* Column Filters */
$(".filterhead").each(function(i) {
if (i != 4 && i != 5) {
var select = $('<select><option value="">Filter</option></select>')
.appendTo($(this).empty())
.on('change', function() {
var term = $(this).val();
table.column(i).search(term, false, false).draw();
});
table.column(i).data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
} else {
$(this).empty();
}
});
/* Range Search -> Input Listener */
$('#min, #max').keyup(function() {
table.draw();
});
});
.container {
max-width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.js"></script>
<body>
<div class="container">
<input type="text" id="min" name="min" placeholder="Min Number">
<input type="text" id="max" name="max" placeholder="Max number">
<table id="table" class="display">
<thead>
<tr>
<th class="filterhead">Name</th>
<th class="filterhead">Address</th>
<th class="filterhead">City</th>
<th class="filterhead">Number</th>
</tr>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
<td>18</td>
</tr>
<tr>
<td>second</td>
<td>as</td>
<td>SDF dfd</td>
<td>50</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
<td>2</td>
</tr>
<tr>
<td>third</td>
<td>as</td>
<td>SDF hello</td>
<td>25</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</body>
I have dynamic table that in one td passes php vales of prices and on end of the table is sum of those prices. There is also a checkbox in every row default checked. I need to empty the content of row where checkbox is unchecked so it removes that price value out of sum calculation.
Question, will that even remove that value? I know setting the td field to hide does not.
Value cell:
<td style="width:10%" class="rowDataSd" id="value">
<?php echo
str_replace(array(".", ",",), array("", "."), $row['rad_iznos']);
?>
</td>
Checkbox cell:
<td style="width:3%">
<input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>">
</td>
I tried with this but nothing happens with no errors:
$(document).ready(function(){
if($("#remove").is(':checked')) {
$("#value").show();
} else {
$("#value").empty();
}
});
I can pass the unique values into each checkbox and value element into id's like:
id="<?php echo $row['rad_id']?>"
. So they tie each other but don't know how to say in JS to empty those elements.
I was also thinking something along the lines of, if on some row checkbox is unchecked empty closest td with id="value". My guess is that would be best solution but I don't know how to write it.
Or even if checkbox is unchecked remove css class .rowDataSd to closest td with id="vale" based on whom calculation is made.
Sum script:
var totals=[0,0,0];
$(document).ready(function(){
var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function() {
$(this).find('.rowDataSd').each(function(i){
totals[i]+=parseFloat( $(this).html());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>');
});
});
As seen on picture need to remove row out of calculation if checkbox is unchecked. Keep in mind I dont want to delete to row, just remove it our of calculation.
Any help with how to approach this is appreciated.
Here is a basic example.
$(function() {
function getPrice(row) {
var txt = $(".price", row).text().slice(1);
var p = parseFloat(txt);
return p;
}
function calcSum(t) {
var result = 0.00;
$("tbody tr", t).each(function(i, r) {
if ($("input", r).is(":checked")) {
result += getPrice(r);
}
});
return result;
}
function updateSum(tbl) {
var t = calcSum(tbl);
$("tfoot .total.price", tbl).html("$" + t.toFixed(2));
}
updateSum($("#price-list"));
$("#price-list input").change(function() {
updateSum($("#price-list"));
});
});
#price-list {
width: 240px;
}
#price-list thead th {
width: 33%;
border-bottom: 1px solid #ccc;
}
#price-list tfoot td {
border-top: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="item name">Item 1</td>
<td class="item price">$3.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 2</td>
<td class="item price">$4.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 3</td>
<td class="item price">$5.00</td>
<td><input type="checkbox" checked /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td class="total price">$0.00</td>
<td> </td>
</tr>
</tfoot>
</table>
It all boils down to setting up an event handler for the checkboxes. The event handler should perform the following:
Track the checkbox change event for all checkboxes and the DOM ready event
Calculate the total of all rows with checkbox checked
Set the total to the total element
It call also perform any desired changes on the unchecked row .. not done in sample code below
THE CODE
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();//trigger the change event on DOM ready
});
THE SNIPPET
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>1000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 2</td>
<td>1200</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 3</td>
<td>800</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 4</td>
<td>102000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
</tbody>
</table>
<span>TOTAL</span><span id="total"></span>
I have a problem with jQuery script. I'm trying to make a simple counting loop, for each tr. I got a table like below, and I want to select the second td, multiply it by two and add to the third td and display the result in the fourth td.
https://codepen.io/adeowsky/pen/YEgVKG
I'm trying to make it with the for each loop like below ->
<script>
(function($) {
$('.sp-league-table tbody tr').each( function() {
var pct = this.find('.data-pct').text();
console.log(pct);
//var pct = $('').hasClass('data-pct').text();
//console.log(pct);
var winy = $('.data-w').text();
var losy = $('.data-l').text();
/*var pkt = (winy*2) + (losy*2);
$('.data-pct').text(pkt);*/
});
})( jQuery );
</script>
But it doesn't work for me, where is the reason?
You are selecting all the elements with the class, not the one in the current row.
var tr = $(this);
var pCell = tr.find(".data-pct")
var wCell = tr.find('.data-w')
var lCell = tr.find('.data-l')
There are a couple of problems
Your table does not have the required class
you're not targeting the specific row's cells
You should explicitly parse the string values to integers
you've commented out the bit that does the calculation:
$(function(){
$('.sp-league-table tbody tr').each( function() {
var pct = $('.data-pct',this).text();
var winy = parseInt($('.data-w',this).text(),10);
var losy =parseInt($('.data-l',this).text(),10);
var pkt = (winy*2) + (losy*2);
$('.data-pct',this).text(pkt);
});
})
Updated: https://codepen.io/anon/pen/NwJjaO
Live example:
$(function(){
$('.sp-league-table tbody tr').each( function() {
var pct = $('.data-pct',this).text();
var winy = parseInt($('.data-w',this).text(),10);
var losy =parseInt($('.data-l',this).text(),10);
var pkt = (winy*2) + (losy*2);
$('.data-pct',this).text(pkt);
});
})
table, tr, td, th {
border: 1px solid #000;
border-collapse: collapse;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sp-league-table">
<thead>
<tr>
<th>Name</th>
<th>W</th>
<th>L</th>
<th>PCT</th>
</thead>
<tr>
<td>Name 1</td>
<td class="data-w">12</td>
<td class="data-l">0</td>
<td class="data-pct">x</td>
</tr>
<tr>
<td>Name 2</td>
<td class="data-w">9</td>
<td class="data-l">3</td>
<td class="data-pct">x</td>
</tr>
</table>
<table class="sp-league-table">
<thead>
<tr>
<th>Name</th>
<th>W</th>
<th>L</th>
<th>PCT</th>
</thead>
<tr>
<td>Name 1</td>
<td class="data-w">12</td>
<td class="data-l">0</td>
<td class="data-pct">24</td>
</tr>
<tr>
<td>Name 2</td>
<td class="data-w">6</td>
<td class="data-l">5</td>
<td class="data-pct">17</td>
</tr>
</table>
I'm using JQuery and I'm sure this is pretty simple stuff but I was unable to find a solution. I have an employee table with "Number" column which is editable(text box). I want to find the duplicates in the "Number" column and highlight those textboxes. For example in the table below I want to highlight all textboxes with values 10 and 20. Also when a edit is done and there are no longer duplicates, remove the highlight.
Here's the JSFiddle
Any Ideas?
<table id="employeeTable">
<tr>
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Sally</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>10</td>
</tr>
<tr>
<td>4</td>
<td>Sam</td>
<td>30</td>
</tr>
<tr>
<td>5</td>
<td>Chris</td>
<td>20</td>
</tr>
</table>
There are different possibilities, basically you'll have to test if the value of an array exists more than one time, for example like this.
Update:
Using the value selector works fine in the initial state, but it seems that when a value is changed by direct user input or by calling .val(), the HTML attribute value is not changed (only the native JS .value). Therefore - to use the value selector in this context, the html value attribute is always updated with the JS .value.
function highlightDuplicates() {
// loop over all input fields in table
$('#employeeTable').find('input').each(function() {
// check if there is another one with the same value
if ($('#employeeTable').find('input[value="' + $(this).val() + '"]').size() > 1) {
// highlight this
$(this).addClass('duplicate');
} else {
// otherwise remove
$(this).removeClass('duplicate');
}
});
}
$().ready(function() {
// initial test
highlightDuplicates();
// fix for newer jQuery versions!
// since you can select by value, but not by current val
$('#employeeTable').find('input').bind('input',function() {
$(this).attr('value',this.value)
});
// bind test on any change event
$('#employeeTable').find('input').on('input',highlightDuplicates);
});
Updated fiddle is here.
I guess this is what you are exactly looking for:
Working : Demo
1) First for loop for taking all input values into an array inpValArr[]
2) Second for loop for sorting and finding out the duplicate ones.
3) Third for loop for adding class .highLight to duplicate ones.
Now all this is in a function: inputCheck() which is called on DOM Ready and after you edit the text field.
inputCheck();
$("#employeeTable input").bind("change paste keyup", function() {
inputCheck();
});
function inputCheck() {
var totalInp = $("#employeeTable input").length;
var inpValArr = [];
for (var j = 0; j < totalInp; j++) {
var inpVal = $("#employeeTable input:eq(" + j + ")").val();
inpValArr.push(inpVal);
}
var sorted_arr = inpValArr.sort();
var results = [];
for (var i = 0; i < inpValArr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
$('#employeeTable input').removeClass('highLight');
for (var k = 0; k < totalInp; k++) {
$('#employeeTable :input[value="' + results[k] + '"]').addClass('highLight');
}
}
#employeeTable th,
#employeeTable td {
padding: 0.8em;
border: 1px solid;
}
#employeeTable th {
background-color: #6699FF;
font-weight: bold;
}
.highLight {
background: red;
}
<table id="employeeTable">
<tr>
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>
<input type="text" value="10" />
</td>
</tr>
<tr>
<td>2</td>
<td>Sally</td>
<td>
<input type="text" value="20" />
</td>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>
<input type="text" value="10" />
</td>
</tr>
<tr>
<td>4</td>
<td>Sam</td>
<td>
<input type="text" value="30" />
</td>
</tr>
<tr>
<td>5</td>
<td>Chris</td>
<td>
<input type="text" value="20" />
</td>
</tr>
</table>
You could easily give a class such as 'hasInput' to all td with inputs and then try a .each on all of them and check for value if they are 10 or 20 and then add a class to make them styled as you wish.
html:
<table id="employeeTable">
<tr>
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td class="hasInput"><input type="text" value = "10"/></td>
</tr>
<tr>
<td>2</td>
<td>Sally</td>
<td class="hasInput"><input type="text" value = "20"/></td>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td class="hasInput"><input type="text" value = "10"/></td>
</tr>
<tr>
<td>4</td>
<td>Sam</td>
<td class="hasInput"><input type="text" value = "30"/></td>
</tr>
<tr>
<td>5</td>
<td>Chris</td>
<td class="hasInput"><input type="text" value = "20"/></td>
</tr>
css:
#employeeTable th, #employeeTable td{
padding:0.8em;
border: 1px solid;
}
#employeeTable th{
background-color:#6699FF;
font-weight:bold;
}
.colored {
background-color: red;
}
js:
$('.hasInput > input').each(function() {
if ($(this).val() == 10 || $(this).val() == 20) {
$(this).addClass('colored');
}
});
DEMO
This would work:
var dupes=[], values=[];;
$('.yellow').removeClass('yellow');
$('#employeeTable td:nth-child(3) input').each(function(){
if($.inArray($(this).val(),values) == -1){
values.push($(this).val());
}
else{
dupes.push($(this).val());
}
});
$('#employeeTable td:nth-child(3) input').filter(function(){return $.inArray(this.value,dupes) == -1 ? false : true }).addClass('yellow');
#employeeTable th, #employeeTable td{
padding:0.8em;
border: 1px solid;
}
#employeeTable th{
background-color:#6699FF;
font-weight:bold;
}
.yellow{
background-color:yellow;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="employeeTable">
<tr>
<th>Id</th>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td><input type="text" value = "10"/></td>
</tr>
<tr>
<td>2</td>
<td>Sally</td>
<td><input type="text" value = "20"/></td>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td><input type="text" value = "10"/></td>
</tr>
<tr>
<td>4</td>
<td>Sam</td>
<td><input type="text" value = "30"/></td>
</tr>
<tr>
<td>5</td>
<td>Chris</td>
<td><input type="text" value = "20"/></td>
</tr>
</table>
Expanding on the answer provided by #axel.michel using .count() selector of Linq.js. I decided to go this route because I couldn't get the JQuery selector to work correctly provided in his answer. And I really like the Linq.js and find myself loving it more each time i implement a use of it.
var allTextBoxes = $().find('input:text');
// loop over all input fields on page
$(allTextBoxes)
.each(function() {
// select any other text boxes that have the same value as this one
if (Enumerable.from(allTextBoxes).count("$.value == '" + $(this).val() + "'") > 1) {
// If more than 1 have the same value than highlight this textbox and display an error message
$(this).addClass('duplicate');
$('#custom-field-validator').html('Custom fields must have unique names.');
valid = false;
} else {
// otherwise remove
$(this).removeClass('duplicate');
}
});
This is working fine without needing to worry about the value selector and syncing the value attributes.
HTML:
<table class="vi_table">
<thead>
<tr>
<th><input type="checkbox" class="v_checkbox"/>Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td><input type="checkbox" class="v_checkbox"/></td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
Css:
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
Jquery:
$(document).ready(function () {
$(document).on('click', '.vi_table tbody tr', function (e) {
var submit = $('#percentage_submit_button');
var checked= $(this).find('input[type="checkbox"]');
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
if($('.v_checkbox').is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
submit.prop('disabled', true);
}
});
$(document).on('click', 'input[type="checkbox"]', function () {
$(this).prop('checked', !$(this).is(':checked'));
$(this).parent('tr').toggleClass('selected'); // or anything else for highlighting purpose
});
});
So Far - Fiddle
I want to select the checkbox by clicking anywhere on the row including the checkbox. I would like to enable and disable the button if any one of the checkbox is selected in the tbody.
clicking the Selectall checkbox needs to select all the rows and enable the button.
Still I have some issues on selecting and deselecting the checkbox.
I gave the example of what I have tried so far, but I would like to make this clean like non repeating code. how can I make this code simple and more efficient way?
Thanks
Made a few changes so the checkboxes align. See code comments for further info:
Fiddle in case Code Snippet doesn't work
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checkbox = $(this);
if ($(this).is('tr')) {
checkbox = $(this).find('input[type="checkbox"]');
}
submit.prop('disabled', true); // Disable submit button
checkbox.prop('checked', !checkbox.is(':checked')); // Change checked property
if (checkbox.hasClass('all')) { // If this is "all"
$('.v_checkbox:not(.all)').prop('checked', checkbox.is(':checked')); // Set all other to same as "all"
if (checkbox.is(':checked')) { // change colour of "all" tr
checkbox.closest('tr').addClass('diff_color');
} else {
checkbox.closest('tr').removeClass('diff_color');
}
}
var blnAllChecked = true; // Flag all of them as checked
$('.v_checkbox:not(.all)').each(function() { // Loop through all checkboxes that aren't "all"
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.prop('disabled', false); // enable submit if one is checked
} else {
$(this).closest('tr').removeClass('diff_color');
blnAllChecked = false; // If one is not checked, flag all as not checked
}
});
if (blnAllChecked) {
$('.v_checkbox.all').closest('tr').addClass('diff_color');
$('.v_checkbox.all').prop('checked', true);
} else {
$('.v_checkbox.all').closest('tr').removeClass('diff_color');
$('.v_checkbox.all').prop('checked', false);
}
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
.diff_color {
background: gray;
}
.vi_table {
background: #c3ced6;
border: 1px solid black;
margin-bottom: 30px;
padding: 5px;
}
.vi_table thead tr th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="vi_table">
<thead>
<tr class="pv">
<th>
<input type="checkbox" class="v_checkbox all" />Select</th>
<th>ID</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>5</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr class="pv">
<td>
<input type="checkbox" class="v_checkbox" />
</td>
<td>9</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
<input id="percentage_submit_button" name="commit" type="submit" value="Set % for Selections">
I added an id to the select all input <input type="checkbox" id="v_checkbox_all" class="v_checkbox" />Select</th>
The select all input is checked first. Applying it's status to each input, then using the .each() to loop though each row and apply the row styles.
Demo here: JSfiddle
$(document).ready(function () {
var testing = function (e) {
var submit = $('#percentage_submit_button');
var checked = $(this).find('input[type="checkbox"]');
var checkedAll = $('#v_checkbox_all');
var isAllChecked = false;
submit.prop('disabled', true);
checked.prop('checked', !checked.is(':checked'));
$(this).prop('checked', !$(this).is(':checked'));
var checkedCount = $('.v_checkbox:checked').not('#v_checkbox_all').length;
var totalCount = $('.v_checkbox').not('#v_checkbox_all').length;
if (checked.prop('id') === 'v_checkbox_all') {
isAllChecked = true;
} else {
if (checked.prop('id') === 'v_checkbox_all' || checkedCount === totalCount) {
checkedAll.prop('checked', true);
} else {
checkedAll.prop('checked', false);
}
}
if (isAllChecked) {
if (checkedAll.is(':checked')) {
$('.v_checkbox').each(function () {
$(this).prop('checked', true);
});
} else {
$('.v_checkbox').each(function () {
$(this).prop('checked', false);
});
}
}
$('.v_checkbox').each(function () {
if ($(this).is(':checked')) {
$(this).closest('tr').addClass('diff_color');
submit.removeAttr('disabled');
} else {
$(this).closest('tr').removeClass('diff_color');
}
});
};
$(document).on('click', '.pv', testing);
$(document).on('click', 'input[type="checkbox"]', testing);
$('#percentage_submit_button').prop('disabled', true);
});
For selecting ALL checkboxes use this code:
$('.v_checkbox').change(function(){
$('.v_checkbox').each(function(){
$(this).prop( "checked", true );
})
;
})