I want to display the table row based on the checkbox selection where I need to display only the particular row. I'm noob in JavaScript and took this snippet from How to show table rows based on checkbox selected
I tried to modify the code as per the requirement but I couldn't able to figure out which I retrieve from the database
In the JS script it matching the td value but I don't mention the table value explicitly all it comes from the db.
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row" onclick="return filter_type(this);">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_0">
AMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="newyork" placeholder="Select Country" id="id_country_3">
newyork</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="china"
placeholder="Select Country" id="id_country_2">china</label>
</li>
</ul>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr id="trow">
{% for i in database%}
<td>i.Region</td>
<td>i.Area </td>
<td>i.Country</td>
</tr>
</tbody>
<script>
// checkbox selection
function filter_type(box) {
//alert("checked");
var cbs = document.getElementsByTagName('input');
var all_checked_types = [];
for(var i=0; i < cbs.length; i++) {
if(cbs[i].type == "checkbox") {
if(cbs[i].name.match(/^country/)) {
if(cbs[i].checked) {
all_checked_types.push(cbs[i].value);
}
}
}
}
if (all_checked_types.length > 0) {
$('.dataclass tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
if (type && all_checked_types.indexOf(type) >= 0) {
$(this).show();
}else{
$(this).hide();
}
});
}else {
$('.datatbl tr:not(:has(th))').each(function (i, row) {
var $tds = $(this).find('td'),
type = $tds.eq(2).text();
$(this).show();
});
}
return true;
}
</script>
Your approach could possibly use some work. W3 has a good example of filtering based on inputs that could be helpful in getting you on the right track.
Below I have provided a working example, using the W3 code as a starting place. This should give you an idea how to implement your desired solution.
In the code you provided it appears that you may be working with jQuery. The solution below is pure JS and does not require any outside libraries. In addition to modifying the JS filtering function (filter_type), we moved the onclick attribute from the div holding all the checkboxes and placed it on each individual checkbox input.
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0" onclick="filter_type();">
NORTHAMERICA</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="LATAM" placeholder="Select Country" id="id_country_3" onclick="filter_type();">
LATAM</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_2" onclick="filter_type();">ASIA</label>
</li>
</ul>
</div>
<table class="datatable" id='table_id'>
<thead>
<thead>
<tr>
<th>Region</th>
<th> Area </th>
<th> Country </th>
</tr>
</thead>
<tbody>
<tr id="trow_1">
<td>i.Region</td>
<td>i.Area </td>
<td>NORTHAMERICA</td>
</tr>
<tr id="trow_2">
<td>i.Region</td>
<td>i.Area </td>
<td>LATAM</td>
</tr>
<tr id="trow_3">
<td>i.Region</td>
<td>i.Area </td>
<td>ASIA</td>
</tr>
</tbody>
<script>
function filter_type() {
//declare variables
var inputs, input, filters, table, tr, td, i, r;
//get all checkbox inputs
inputs = document.querySelectorAll("input[type=checkbox]");
table = document.getElementById("table_id");
tr = table.getElementsByTagName("tr");
//array to hold filters
filters = [];
//loop through inputs and add value for all checked to filters
for (i = 0; i < inputs.length; i++) {
input = inputs[i];
if (input.checked) {
filters.push(input.value);
}
}
//loop through each row in table
for (r = 0; r < tr.length; r++) {
//get column to compare to, in this case the 3rd column
td = tr[r].getElementsByTagName("td")[2];
if (td) {
//get value of the column
txtValue = td.textContent || td.innerText;
//check if column value is the filters array
//or if filters array is empty, show all rows
if (filters.indexOf(txtValue) > -1 || filters.length == 0) {
//true, show row
tr[r].style.display = "";
} else {
//false, hide row
tr[r].style.display = "none";
}
}
}
}
</script>
Related
In my application, I have several tables that are built with a loop.
<div v-for="(dimension, index) in listQuestions" :key="index" :header="`${dimension.name}`">
<table class="table-questions" >
<thead>
<tr>
<th><input type="checkbox" #click="onClickCheckAll(dimension)" /></th>
<th>Sous-dimension</th>
<th>Item</th>
</tr>
</thead>
<tbody v-for="(question,i) in dimension.sousDimensions" >
<tr v-for="(item, p) in question.questions">
<td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
<td v-else ><input type="checkbox" #click="onClickOneCheckbox(item.id)" :id="'choice-' + item.id" /> </td>
<td style="width: 40%">{{question.name}}</td>
<td >{{item.item}}</td>
</tr>
</tbody>
</table>
</div>
I would like to be able to select all the rows of each table with a checkbox.
I have seen this tuto: vuejs tables and select all checkbox which seems to me very good. But I can’t apply it in my case of several tables.
How can I use the data selected and selectAll like in the example but for several tables?
I have started to build a function to access the items like this and I have my ID of items :
EDIT.
I try to do this :
onClickCheckAll(value) { //when click to all chekckbox
console.log("click")
console.log(value)
console.log(value.sousDimensions)
for (var sousdim of value.sousDimensions)
{
for (var item of sousdim.questions)
{
console.log(this.selectCheck)
const p = this.selectCheck.indexOf(item.id) //looking for index for each item
const checkboxItem = document.querySelector("#choice-" + item.id) //all inputs with id choice-ID and then add or remove "checked" attribute
if (p > -1) { //if still there, delete
this.selectCheck.splice(p, 1);
if (!item.barometre)
{
checkboxItem.checked=false
}
}
else { //if not, adding in array
this.selectCheck.push(item.id)
checkboxItem.checked=true
}
}
}
},
onClickOneCheckbox(val) {
const index = this.selectCheck.indexOf(val);
if (index > -1) //delete item if still in the array
{
this.selectCheck.splice(index, 1);
}
else
{
this.selectCheck.push(val)
}
console.log(this.selectCheck)
}
And it's partially works : when I click individually on the first two rows of my table and then click on the checkbox to select all, all rows get selected...Except the first two!
See the problem here : https://jsfiddle.net/chtouk/rc80ksno/35/
Thanks for help
I have a dynamic table that I am displaying in the front end like this:
<table id ="tblRE">
<tr class="row">
<th ng-repeat="column in cols_re">{{column}}</th>
</tr>
<tr ng-repeat="row in data['dict_re']">
<td ng-repeat="column in cols_re">{{row[column]}}</td>
</tr>
</table>
I want to put a filter on one of the columns named OUT(my 2nd column from the table).
If I would have a fix column name I would do like this:
<tr class="row">
<td class="head" ng-click="sortData='OUT';sortOrder=!sortOrder"> OUT</td>
</tr>
<tr ng-repeat="item in data.table_df| orderBy:sortData:sortOrder | filter:filter ">
<td>{{ item.OUT}}</td>
</tr>
Is there an option on how I can put the filter with my initial option?
I also tried to add a search button which kind of works only for the first column. I want to be able to filter also on the second column.
The code for the search button:
js:
function searchre() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("tblRE");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
and in HTML:
<input class="myInput" type="text" id="myInput" onkeyup="searchre()" placeholder="Search.." title="Type in a name">
Any idea on how I can filter on the first and 2nd column?
home.jsp
<input type="text" id="myContractNumberInput" ng-model="contractno"
ng-change="getContractnNo()" onkeyup="myFunction()" name="contractno"
placeholder="Contract Number.." size="35">
<hr>
<ul>
<li data-ng-repeat="contractTypeData in contractDetailsList">
<table id="myContractTable" border="1">
<tr>
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</li>
</ul>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myContractNumberInput");
filter = input.value.toUpperCase();
table = document.getElementById("myContractTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
The above function on key event must return the entered matching data from the list object as it is not returning the expected data which is entered in text box
You can use angular filter for filtration of result using search input field, please find below example, also there is no need to use myFunction for this filtration, and for any other custom logic, you can create your own custom filter (follow this link https://docs.angularjs.org/api/ng/filter/filter):
function TodoCtrl($scope) {
$scope.contractDetailsList = [
{'contractId': 1,
'contractDes': 'one'},
{'contractId': 2,
'contractDes': 'two'},
{'contractId': 3,
'contractDes': 'three'}
]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<input type="text" id="myContractNumberInput" ng-model="contractno" name="contractno" placeholder="Contract Number.." size="35">
<hr>
<table id="myContractTable" border="1">
<tr>
<td>ID</td>
<td>Description</td>
</tr>
<tr data-ng-repeat="contractTypeData in contractDetailsList | filter:contractno">
<td>{{contractTypeData.contractId}}</td>
<td>{{contractTypeData.contractDes}}</td>
</tr>
</table>
</div>
I implement table with paging.
Here the code to create table:
<table id="ContactsTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
#Html.CheckBox("chkBoxAllEmails", new { onclick = "SelectAllEmails(this);" })
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
</tr>
</thead>
#foreach (UserContact item in ViewBag.Contacts)
{
<tr>
<td>
<input id = "#(("chkbox" + index++).ToString())" name="chboxEmail" type="checkbox" value = "#item.email" onclick="SelectEmail(this); " />
</td>
<td>
#item.firstName
</td>
<td>
#item.lastName
</td>
<td>
#item.email
</td>
</tr>
}
</table>
Here is the code that create paging in the table:
<script>
$(document).ready(function () {
$('#ContactsTable').dataTable();
});
</script>
And here is how this table looks:
As you can see table contain checkbox column. When I check the header of the checkbox column
all the checkbox have to be selected.Here is the JS code that implements it:
function SelectAllEmails(chboxSelectAllElements) {
var chboxEmailsArray = document.getElementsByName("chboxEmail");
if (chboxSelectAllElements.checked) {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = true;
}
}
else {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = false;
}
}
}
And here is how it's looks after I check the header of the checkbox:
But when I select second page in paging, turn out that the checkboxes not checked:
i.e checkboxes will only work on current pagination page.
My question is why not all checkboxes selected?
I need to check or uncheck all checkboxes when the checkbox in the header checked or unchecked , any idea or examples how can I implement it in my example?
Thank you in advance.
Use on :
$(document).on('change', 'input[name="chboxEmail"]', function(e) {
$('input:checkbox').not(this).prop('checked', this.checked);
});
Than use the .on() method to delegate the click event to future elements added to the DOM
I am currently working on javascript. In this code I have a table and a textbox. When I enter data in the textbox it should show the particular value that I typed but it doesn't search any data from the table. How do I search data in the table?
Here's a jsfiddle http://jsfiddle.net/SuRWn/
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th> </th>
<th> </th>
<th><center> <b>COURSE CODE</b></center></th>
<th><center>COURSE NAME</center></th>
</tr>
</thead>
<tbody>
<tr id="rowUpdate" class="TableHeaderFooter">
<td >
<center> <input type="text" name="input" value="course" ></center>
<center> <input type="text" name="input" value="course1" ></center>
<center> <input type="text" name="input" value="course2" ></center>
</td>
<td>
<center> <input type="text" name="input" value="subject" ></center>
<center> <input type="text" name="input" value="subject1" ></center>
<center> <input type="text" name="input" value="subject2" ></center>
</td>
</tr>
</tbody>
</table >
<form action="#" method="get" onSubmit="return false;">
<label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" />
</form>
Javascript:
<script type="text/javascript">
//<!--
function doSearch() {
var q = document.getElementById("q");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for ( var i = 0; i < rows.length; i++ ) {
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
if ( fullname ) {
if ( v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1 ) ) {
rows[i].style.display = "";
on++;
} else {
rows[i].style.display = "none";
}
}
}
}
//-->
</script>
checking with chrome console, it seems that innerHtml for the 'fullname' is returning an error:
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
That's because the first tr tag you have is in the thead and it doesn't have any td at all. Changing the start of your loop to 1 will fix that:
for ( var i = 1; i < rows.length; i++ ) { //... and so on
yuvi is correct in his answer. I've incorporated this in a fiddle - http://jsfiddle.net/dBs7d/8/ - that also contains the following changes:
Inputs with course and subject grouped into individual rows.
td tags align underneath th tags.
Code refactored to improve readability.
Instead of checking the html of the td tags I've changed it to check the value attribute of the input tags. This means you can change the value of the input and still search.
I also changed the style alteration to use backgroundColor. This can easily be reverted to display.
See this link.
HTML:
<table name="tablecheck" class="Data" id="results" >
<thead>
<tr>
<th>Course</th>
<th>Subject</th>
<th>COURSE CODE</th>
<th>COURSE NAME</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="course" /></td>
<td><input type="text" value="subject" /></td>
</tr>
<tr>
<td><input type="text" value="course1" /></td>
<td><input type="text" value="subject1" /></td>
</tr>
<tr>
<td><input type="text" value="course2" /></td>
<td><input type="text" value="subject2" /></td>
</tr>
</tbody>
</table>
Search here (with jQuery):<input type="text" size="30" value="" onKeyUp="doSearchJQ(this);" /><br />
Search here:<input type="text" size="30" value="" onKeyUp="doSearch(this);" />
Javascript:
function doSearchJQ(input) {
var value = $(input).val();
if (value.length > 0) {
$("#results tbody tr").css("display", "none");
$('#results input[value^="' + value + '"]').parent().parent().css("display", "table-row");
} else {
$("#results tbody tr").css("display", "table-row");
}
}
function doSearch(input){
var value = input.value;
var table = document.getElementById('results');
var tbody = table.querySelector("tbody");
var rows = tbody.querySelectorAll("tr");
var visible, row, tds, j, td, input;
for (var i = 0; i < rows.length; i++) {
visible = false;
row = rows[i];
tds = row.querySelectorAll("td");
for (j = 0; j < tds.length; j++) {
td = tds[j];
input = td.querySelector("input");
console.log(input.value.indexOf(value));
if (input.value.indexOf(value) > -1) {
visible = true;
break;
}
}
if (visible) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
}
}
With jquery it's more compact function. But you can use clear javascript doSearch.
Why don't you use JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.
See example table below:
The plugin is well-documented, and widely used. It should be very easy to drop in into an existing application, and style it accordingly.
Hope this helps!