We Keep Coding

Selecting specific value in row of the selected checkbox and checking for duplicates

I came across a problem whose solution has led me to post it here so others may make use of it or improvise better than me.
My Problem: I have a table of results with check boxes to select rows. The requirement was to know if I was selecting(using the checkboxes) the same set of one particular column value, if so I had to do something.

HTML code
Considering the below being my html code for the dynamic table(CFML). The tag has to be inside a loop to dynamically create the table content.
<table class="fixedTable">
<thead class="containerbg">
<tr class="listingheader">
<td>StagingID</td>
<td>BatchID</td>
<td>AuditID</td>
<td>Action</td>
<td>File Name</td>
<td>Card No</td>
<td>Card No</td>
</tr>
</thead>
<tbody>
<tr class="cur_row" >
<td>#staging_id#</td>
<td>#batch_import_job_id#</td>
<td>#audit_Id#</td>
<td>#code#</td>
<td class="file_name">#source_filename#</td>
<td>#card_number#</td>
<td class="tblResolve">
<input type="checkbox" class="checkBoxClass cb" name="resolveErrorsCheck" value="#row_no#">
</td>
</tr>
JS Code
//register the click event
$(document).ready(function() {
$(document).on('click', '.cb',enableDisableActions);
});
function enableDisableActions() {
var values = new Array();
$.each($("input[name='resolveErrorsCheck']:checked").closest('td').siblings('.file_name'),
function (){
values.push($(this).text());
});
const initial = values[0];
const result = values.filter(src => src != initial);
if(result.length){
//no duplicate file_name selected
//do something
}else{
//duplicate file_name selected
//do something
}
}

MDL table retrieve data checked values

I'm using tables of MDL lib. https://getmdl.io/components/index.html#tables-section­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­
But there are no docs how I can retrieve checked values about.
I found only this solution, but this not helping at all:
var checkboxes = document.getElementById('team-table-id')
.querySelector('tbody').querySelectorAll('.mdl-checkbox__input');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function() {
console.log(this)
// returns <input type="checkbox" class="mdl-checkbox__input">
// how can I assign and retrieve value to/from this input?
});
}
How can I assign a value to checkbox/input of table rows at all?
How can I retrieve single checked values?
How can I handle "select all" event and get data of all rows?

Ok, I didn't find solution.
So I make my own for temporary:
1) Assign some class for tr's, so it can be found when check event happend
2) assign value for tr's. It can be serialized values or smth like that
3) listen check event and get data
Markup:
<table id="team-table-id" width="100%" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr class="row-info" data-value="all">
<th class="mdl-data-table__cell--non-numeric">Donation Invoice</th>
<th>Donation Name</th>
<th>Donation price</th>
</tr>
</thead>
<tbody>
<tr class="row-info" data-value="one more value">
<td class="mdl-data-table__cell--non-numeric">I-20170419120440</td>
<td>Some Donation Name</td>
<td>$2.90</td>
</tr>
<tr class="row-info" data-value="another value">
<td class="mdl-data-table__cell--non-numeric">C-20170419120454</td>
<td>Anothre</td>
<td>$1.25</td>
</tr>
<!--etc...-->
Javascript:
window.findAncestor = (el, cls) => {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
let checkboxes = document.getElementById('team-table-id')
.querySelectorAll('.mdl-checkbox__input');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function() {
console.log(findAncestor(this, 'row-info'))
});
// Returns parent table row, so you can get selected data.
// For example <tr data-value="some value" class="row-info">....
Please, feel free to suggest right one.
UPD:
This approach dnt have bugs and can hanlde all checked values, so I've marked this as "solved".

Have a look at https://github.com/google/material-design-lite/issues/1210 where several solutions (work-around) are presented depending on the version of MDL

I am following this (work-around)
On window.onload I am adding onclick attribute to all checkbox to call function getCheckValue(this), this function traverse through dom to get innerHTML of each td in tr
window.onload=function(){
var checkAll=document.getElementsByClassName('mdl-checkbox__input')
for(var i=0;i<checkAll.length;i++){
checkAll[i].setAttribute('onclick','getCheckValue(this)')
}
}
function getCheckValue(obj){
if(obj.checked){
/*th is checked in thead*/
if(obj.parentElement.parentElement.parentElement.parentElement.nodeName=='THEAD'){
var trs=obj.parentElement.parentElement.parentElement.parentElement.nextElementSibling.children
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName('td')
for(var j=1;j<tds.length;j++){
console.log(tds[j].innerHTML)
}
}
}
else{
/*td inside tbody is checked*/
var tds=obj.parentElement.parentElement.parentElement.getElementsByTagName('td')
for(var i=1;i<tds.length;i++){
console.log(tds[i].innerHTML)
}
}
}else{
/* uncheck th checkbox of thead*/
if(obj.parentElement.parentElement.parentElement.parentElement.nodeName!='THEAD'){
obj.parentElement.parentElement.parentElement.parentElement.previousElementSibling.firstElementChild.firstElementChild.firstElementChild.classList.remove('is-checked')
obj.parentElement.parentElement.parentElement.parentElement.previousElementSibling.firstElementChild.firstElementChild.firstElementChild.firstElementChild.checked=false
}
}
}
Plunker link for demonstration

Toggle checkboxes on PHP table

I have a table with a checkbox in the table header, which will be used to toggle all the checkboxes below it. I've add a JavaScript function to the checkbox in the header, but so far it only selects the top checkbox (one checkbox) instead of all of them. Any suggestions or advice on what I've done wrong or what to research?
HTML table header code:
<thead>
<tr>
<th><center><input type="checkbox" value="" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"></center></th>
<th>Sender</th>
<th>Receiver</th>
<th>Subject</th>
<th>Date</th>
</tr>
</thead>
PHP table code:
$table .= '
<tr>
<td><center><input type="checkbox" id="cb1_1" class="cbgroup1"></center></td>
<td>'.$sender.'</td>
<td>'.$receiver.'</td>
<td>'.$subject.'</td>
<td>'.$time.'</td>
</tr>';
Javascript code:
function togglecheckboxes(master,cn){
var cbarray = document.getElementsByClassName(cn);
for(var i = 0; i < cbarray.length; i++){
var cb = document.getElementById(cbarray[i].id);
cb.checked = master.checked;
}
}

The problem is you setting the same ID (cb1_1) to all the checkboxes (which is invalid in HTML) Id should be unique in the page. Thus, it only select the first found checkbox and discard the rest. To resolve this give unique ids to checkboxes.
$table .= '
<tr>
<td><center><input type="checkbox" id="cb1_'.$pmid.'" class="cbgroup1"></center></td>
<td>'.$sender.'</td>
<td>'.$receiver.'</td>
<td>'.$subject.'</td>
<td>'.$time.'</td>
</tr>';
Note: I just use the $pmid just as an example you should use appropriate value as per your scenario

I see 2 issues with you code.
(Probably) using the same id for multiple DOM elements
Your PHP code suggests that you are probably using a loop to create the checkboxes but you are using the same id for all of them "cb1_1".
Same as #atul here.
Improperly selecting your checkbox elements
Since you are using the same id for all inputs,
var cb = document.getElementById(cbarray[i].id);always returns the same element. A way to solve it is to use the solution provided by #atul
Another way is to rewrite your javascript as follows :
function togglecheckboxes(master,cn){
var cbarray = document.getElementsByClassName(cn);
for(var i = 0; i < cbarray.length; i++){
var cb = cbarray[i];
cb.checked = master.checked;
}
}
Your cbarray is already your checkboxes array, so it is redundant (aka useless) to call document.getElementById(cbarray[i].id) to get the element when you already have it with cbarray[i].

Code for select/unselect all checkboxes in an AngularJS Table

Iam completely confused at a point and need anyone's help here. Went through various examples but nothing could help.
I have a created dynamic table, added with checkboxes. Now whenever a row is selected its id will be bound to an array and it will be diplayed at the top of table.
What I need is:The code for functionality of select all check box. And whenever all the rows are selected by select all checkbox, its ids has to be displayed.
Below is the code for the table:
<table>
<thead>
<tr>
<th>
<input name="all"
type="checkbox"
ng-click="selectAll()" />
</th>
<th>ID</th>
<th>Date</th>
</tr>
</thead>
<tbody ng-repeat="x in cons">
<tr>
<td>
<input type="checkbox"
name="selectedids[]"
value="{{x.id}}"
ng-checked="idSelection.indexOf(x.id) > -1"
ng-click="toggleSelection(x.id, idSelection)"> </td>
<td>{{x.id}}</td>
<td>{{x.title}}</td>
</tr>
</tbody>
app.js:
$scope.idSelection = [];
$scope.toggleSelection = function toggleSelection(selectionName, listSelection) {
var idx = listSelection.indexOf(selectionName);
// is currently selected
if (idx > -1) {
listSelection.splice(idx, 1);
}
// is newly selected
else {
listSelection.push(selectionName);
}
};
//$scope.selectAll=function(){}
//Need code for this function to work
Here is a demo: http://plnkr.co/edit/m9eQeXRMwzRdfCUi5YpX?p=preview.
Will be grateful, if anyone can guide.

You need a variable to keep track of whether 'All' is currently active or not. If not, we create a new array of all item id's using the array map function, and pass this to idSelection. If allSelected is currently active, we pass an empty array to idSelection
$scope.allSelected = false;
$scope.selectAll = function() {
$scope.allSelected = !$scope.allSelected;
if($scope.allSelected) {
$scope.idSelection = $scope.cons.map(function(item) {
return item.id;
});
} else {
$scope.idSelection = [];
}
}

Using Javascript to filter and hide specific table rows

I'm trying to create a filter feature that removes certain scores from a table based on min and max value.
My HTML:
<table id="historyTable">
<tr>
<th>Game #</th>
<th>Date</th>
<th>Location</th>
<th>Score</th>
<th>Strikes</th>
<th>Spares</th>
</tr>
<tr>
<td>299</td>
<td>29 Feb 2016</td>
<td>Hello World Bowling Alley</td>
<td>202</td>
<td>6</td>
<td>1</td>
</tr>
<tr> ...same thing as above repeated a few times </tr>
</table>
I've got a button that takes the user's input min and max values and passes it to the following JS function onclick:
function updateFilter(min, max) {
var table = document.getElementById('historyTable');
var rowCount = table.rows.length-1; // since I don't want to include the header row
for(var i = 1; i<=rowCount; i++) {
var scoreCheck = table.rows[i].cells[3].innerHTML;
if(scoreCheck < min || scoreCheck > max) {
$(table.rows[i].innerHTML).hide();
}
}
}
However, it doesn't seem to be working. What am I doing wrong?

Example (jsFiddle)
The fiddle includes some extra functions which were created to dynamically populate the table; however, this is the crux of the fiddle:
window.updateFilter = function(min, max) {
var table = document.getElementById('historyTable'),
rows = table.tBodies[0].rows,
fields = { score: 3 };
// loop over rows
for (var i = 0, n = rows.length; i < n; i++) {
// get the numerical score; notice the unary-plus (+) for integer conversion
var scoreCheck = +rows[i].cells[fields.score].innerText;
if (scoreCheck < min || scoreCheck > max) {
hidden[i] = rows[i]; // cache hidden row
rows[i].style.display = 'none'; // hide the entire row
}
// if row has a good value, make sure its shown (unhide if hidden)
else {
// make sure another method didn't already unhide it
if (hidden.hasOwnProperty(i)) {
hidden['' + i].style.display = ''; // set the styling so its visible
delete hidden[i]; // no longer need the value in cache
}
}
}
return false;
}
If anything, your code $(table.rows[i].innerHTML).hide() is attempting to hide a property, which probably results in an error. You probably intended to hide the entire row:
$( table.rows[i] ).hide();

These are the issues to correct:
Don't use innerHTML in this selector as it will create a new element, only in memory, and act on that:
$(table.rows[i].innerHTML)
Instead you should select the row element without innerHTML.
Without any code to show rows again, the effect of a second filter will not be as intended, because the previously hidden rows will not appear again if they fit the second filter. So you should better use toggle instead of hide and pass the boolean setting as argument.
When you read the cell content, don't use innerHTML, but the plain text content. Then also convert it to number so numerical comparisons work.
As you use jQuery, you could shorten your code quite a bit.
You could use this code:
function updateFilter(min, max) {
// As you use jQuery, use it to its ful potential:
$('#historyTable > tbody > tr > td:nth-child(4)').each(function() {
// Don't retrieve HTML but text; convert to number with `+`
var scoreCheck = +$(this).text();
// Toggle instead of hide, so it works both ways:
// Don't select providing HTML, but use a TR selector.
$(this).closest('tr').toggle(min <= scoreCheck && scoreCheck <= max);
});
}
$('#filter').click(function () {
var min = +$('#min').val(); // invalid input will use 0 as minimum
// Replace invalid max input with very high value, so everything will be shown
var max = +$('#max').val() || 1e20;
updateFilter(min, max);
});
th, td { border-bottom: 1px solid #ddd;}
tr:hover {background-color: #f5f5f5}
table {font-size: 11px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="historyTable">
<tr>
<th>Game #</th>
<th>Date</th>
<th>Location</th>
<th>Score</th>
<th>Strikes</th>
<th>Spares</th>
</tr>
<tr>
<td>299</td>
<td>29 Feb 2016</td>
<td>Hello World Bowling Alley</td>
<td>202</td>
<td>6</td>
<td>1</td>
</tr>
<tr>
<td>298</td>
<td>13 March 2016</td>
<td>Kuwait Open</td>
<td>158</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>297</td>
<td>13 Oct 2015</td>
<td>11th Columbia 300 Vienna Open</td>
<td>213</td>
<td>7</td>
<td>1</td>
</tr>
<tr>
<td>296</td>
<td>20 Mar 2016</td>
<td>Brunswick Euro Challenge</td>
<td>259</td>
<td>3</td>
<td>2</td>
</tr>
</table>
Min:<input id="min" size="6" value="180">
Max:<input id="max" size="6" value="210">
<button id="filter">Apply filter</button>