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 );
})
;
})
Related
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 made a table list and each row has checkbox.
And I trying to make if the checkbox is checked, add class on parent TR element.
But the problem is when check-all is checked, adding class on TR is not working.
This is what I tried here
Demo : https://jsfiddle.net/upXr8/24
$(document).ready(function() {
$("#checkAll").change(function(){
if(this.checked){
$(".checkbox").each(function(){
this.checked=true;
})
}else{
$(".checkbox").each(function(){
this.checked=false;
})
}
});
$(".checkbox").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkbox").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkAll").prop("checked", true); }
}else {
$("#checkAll").prop("checked", false);
}
});
$(".tbl tbody").on('click', 'input:checkbox', function() {
$(this).closest('tr').toggleClass('selected', this.checked);
});
$('.tbl input:checkbox:checked').closest('tr').addClass('selected');
});
thead tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
<col class="wid1">
</colgroup>
<thead>
<tr>
<td><input type="checkbox" name="" id="checkAll">all</td>
<td>head</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox"></td>
<td>cell</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox" checked></td>
<td>cell</td>
</tr>
</tbody>
</table>
How do I fix the code?
Also How do I fix the jquery more simpler ?
Please help.
Just add $(this).parent().parent().addClass('selected') in your loop when 'all' is checked, and $(this).parent().parent().removeClass('selected') when it's unchecked, as so:
$("#checkAll").change(function(){
if(this.checked){
$(".checkbox").each(function(){
this.checked=true;
$(this).parent().parent().addClass('selected')
})
}else{
$(".checkbox").each(function(){
this.checked=false;
$(this).parent().parent().removeClass('selected')
})
}
});
See here for updated fiddle
It might be helpfull for you
$(document).ready(
function() {
//clicking the parent checkbox should check or uncheck all child checkboxes
$("#checkAll").click(
function() {
$(this).closest('table').find('.checkbox').prop('checked', this.checked).closest('tr').toggleClass('selected', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.checkbox').click(
function() {
if ($(this).closest('table').find('#checkAll').prop('checked') && this.checked == false){
$(this).closest('table').find('#checkAll').attr('checked', false);
}
$(this).closest('tr').toggleClass('selected', this.checked);
var flag = true;
$(this).closest('table').find('.checkbox').each(
function() {
if (this.checked == false){
flag = false;
return;
}
}
);
$(this).closest('table').find('#checkAll').prop('checked', flag);
$(this).closest('table').find('.checkbox').toggleClass('selected', flag);
}
);
}
);
thead tr { background:#aaa}
.wid1 { width:50px; }
.selected { background: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" border=1 width=100%>
<colgroup>
<col class="wid1">
</colgroup>
<thead>
<tr>
<td><input type="checkbox" name="" id="checkAll">all</td>
<td>head</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox"></td>
<td>cell</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="checkbox" checked></td>
<td>cell</td>
</tr>
</tbody>
</table>
I have a page with nested table and checkbox for checking all the table cell <td>. And checkbox for each table cell <td> for checking respective cell.
What I'm trying to do is
CheckAll checkbox checks/uncheck all the parent and child checkbox
Uncheck a parent checkbox unchecks CheckALL checkbox and unchecks all the child checkbox
Check a parent checkbox checks all child checkbox and finds out if all other parent checkbox are checked or not, to check CheckALL checkbox
checking a child checkbox should check the respective parent
unchecking a child checkbox should check if siblings are checked, if not checked parent checbox should get unchecked and if checkALL checkbox is checked it should get unchecked too.
I'm unable to do this.
Here is what I have tried.
html:
<table class="table table-striped tablesorter">
<thead>
<tr colspan="2">
<th>
<input type="checkbox" id="checkedAll">
</th>
<th>Check/UnCheck ALL Boxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkParent">
</td>
<td>1KWT</td>
</tr>
<tr>
<td colspan="2" style="padding: 0">
<table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
<thead>
<tr>
<th></th>
<th>Sub</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1KWT1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1KWT2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkParent" style="margin-top: -3px"> </td>
<td>1OMN</td>
</tr>
<tr>
<td colspan="2" style="padding: 0">
<table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0">
<thead>
<tr>
<th></th>
<th>Sub</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1OMN1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkChild" style="margin-top: -3px"> </td>
<td>1OMN2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
script:
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkParent, .checkChild").each(function(){
this.checked=true;
});
}else{
$(".checkParent, .checkChild").each(function(){
this.checked=false;
});
}
});
$(".checkParent").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkParent").each(function(){
if(!this.checked)
isAllChecked = 1;
})
$(".checkChild").prop("checked", true);
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}else {
$("#checkedAll, .checkChild").prop("checked", false);
}
});
$(".checkChild").click(function () {
if ($(this).is(":checked")){
$(".checkParent").prop("checked", true);
}else {
$(".checkParent").prop("checked", false);
}
});
});
link to fiddle https://jsfiddle.net/4zhhpwva/
I've done it. Improvement's are welcomed. Here is the updated script
$(document).ready(function() {
$("#checkedAll").change(function() {
if (this.checked) {
$(".checkParent, .checkChild").each(function() {
this.checked = true;
});
} else {
$(".checkParent, .checkChild").each(function() {
this.checked = false;
});
}
});
$(".checkParent").click(function() {
if ($(this).is(":checked")) {
var isAllChecked = 0;
$(".checkParent").each(function() {
if (!this.checked)
isAllChecked = 1;
})
$(this).closest("tr").next("tr").find(".checkChild").prop("checked", true);
if (isAllChecked == 0) {
$("#checkedAll").prop("checked", true);
}
} else {
$("#checkedAll").prop("checked", false);
$(this).closest("tr").next("tr").find(".checkChild").prop("checked", false);
}
});
$(".checkChild").click(function() {
if ($(this).is(":checked")) {
var isChildChecked = 0;
$(".checkChild").each(function() {
if (!this.checked)
isChildChecked = 1;
});
if (isChildChecked == 0) {
$("#checkedAll").prop("checked", true);
}
$(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", true);
} else {
var isAllSiblingChecked = 0;
$(this).closest("tr").nextAll("tr").find(".checkChild").each(function() {
if ($(this).is(":checked"))
isAllSiblingChecked = 1;
});
$(this).closest("tr").prev("tr").find(".checkChild").each(function() {
if ($(this).is(":checked"))
isAllSiblingChecked = 1;
});
if (isAllSiblingChecked == 0) {
$(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", false);
}
$("#checkedAll").prop("checked", false);
}
});
});
I've updated the fiddle here to see the working https://jsfiddle.net/shumaise/4zhhpwva/10/
Your issue is that the selectors you have in place are always getting ALL checkchildren and ALL checkParents instead of just the nested ones. You need to make it more specific.
There's definitely a better way to do this, but as an example to show what I mean, on the checkParent click function, instead of $(".checkChild") which will grab all checkChildren on the page, you probably want to do something like $(this).closest("tr").next("tr").find(".checkChild")
That said, if you change your markup so that they are nested under a common ancestor that isn't shared with any other checkChild elements, that could be simplified so that the .next wouldn't be needed.
I've updated your fiddle here - https://jsfiddle.net/4zhhpwva/3/ so you can see it working...
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.
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>