I did this call in Javascript in IE and it works great but in Chrome NOT at all!
I want to hide or show table rows according to a boolean evaluation.
function show(checked, tableName) {
if (checked) {
$(tableName + " tr.class1").show();
} else {
$(tableName + " tr.class1").hide();
}
}
IN HTML
<input type="checkbox" onclick="show(this.checked, '#tbody1')" />
<table>
<thead></thead>
<tbody id="#tbody1">
<tr class="class1"><td></td></tr>
<tr><td></td></tr>
<tr class="class1"><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Nothing happens.
Foolish problem! It works now! It was a problem of Chrome temporary files. It was running the previous version of my javascript which was an include!. Thank you all you guys for the time.
This script I wrote works for me:
var tableClass = '.table';
var checked = false;
if(checked){
$(tableClass + " tr.class1").show();
}else{
$(tableClass + " tr.class1").hide();
}
Having this html:
<table class='table' border="1">
<tr class='class1'>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Related
Table .cells will return all the inner cells in table. It is working fine in IE.But in Chrome .cells will return 'undefined' because no such property exists.We have to loop through each row to find the cells.Is there any other way to get all the cells in chrome?
function myFunction() {
var x = document.getElementById("myTable").cells.length;
document.getElementById("demo").innerHTML = "Found " + x + " cells in
the first tr element.";
}
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
There is nothing called document.getElementById("myTable").cells.length
the .cells actually returns nothing, thus your x variable returns undefined and you don't get the cell numbers.
Instead, you can do the following:
function myFunction() {
var x = document.getElementById("myTable");
// if you need all the cells which is td elements
var cells = x.getElementsByTagName('td');
// if you need only cells in a single row which is a tr element
var cellsPerRow = x.getElementsByTagName('tr')[0].getElementsByTagName('td');
document.getElementById("demo").innerHTML = "Found " + cellsPerRow.length + " cells in the first tr element." + "And " + cells.length + " cells in total" ;
}
myFunction();
<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<div id='demo'></div>
I've a very big table in a HTML page and I create a text input for show only the matching row of the table.
This is my code:
<input type="text" id="myInput" oninput="myFunction()">
<table id="tabella">
<tr><th>TIPO</th><th>SCHEMA</th><th>NOME</th><th>DDL</th></tr>
<tr><td>[...]</td></tr>
[...] > 10000 rows
</table>
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
var table = document.getElementById('tabella');
for (var i = 0, row; row = table.rows[i]; i++)
{
for (var j = 0, col; col = row.cells[j]; j++)
{
$(row).hide();
}
}
for (var i = 0, row; row = table.rows[i]; i++)
{
if ( row.cells[2].innerHTML.includes(x) )
{
$(row).show();
}
}
}
</script>
The problem is:
When I type a single character in the input field it waits for a very long time Is there a mode for rewrite that is faster?
There are several things you can do to improve the performance...
Don't use .innerHTML when the text you are working with doesn't
contain HTML because the browser engages the HTML parser every time
you use this. For getting/setting text that does not contain HTML,
use .textContent. In JQuery, the analogous methods are .html() and .text().
Don't scan the DOM for elements that you've already scanned for
previously. This means make cached variable references to your DOM
objects outside of your repeatedly called functions.
Rather than looping over every row and cell manually, and since you are using
JQuery, just get all the rows into a JQuery wrapped set and work with
that collection. Use the JQuery
.find() method with the JQuery :contains selector.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#demo { margin-top:1em; padding:3px; width:20%; font-weight:bold;
border:1px solid #aa0; background:#ee3; height:1em;
}
</style>
</head>
<body>
<input type="text" id="myInput">
<table id="tabella">
<thead>
<tr>
<th>TIPO</th>
<th>SCHEMA</th>
<th>NOME</th>
<th>DDL</th>
</tr>
</thead>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 21</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 21</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 21</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 21</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
</tr>
</table>
<div id="demo"></div>
<script>
// Get your DOM references outside of the callback function
// so that you aren't scanning the DOM over and over for the
// same elements.
let $tbl = $("#tabella");
let $dem = $("#demo");
// Don't use inline HTML event handlers (i.e. oninput).
// Do all of yor JavaScript outside of the HTML
$("#myInput").on("input", myFunction);
function myFunction() {
// Hide all the rows in the table, except the header row
// (<tbody> is implicitly created)
$("tbody > tr",$tbl).hide();
// Then, find the row(s) that contain the entered text and show only them.
let $found = $tbl.find("tbody > tr:contains('" + this.value + "')").show();
// Don't use .innerHTML for non-HTML strings, use .textContent instead.
// In JQuery, that's .text() instead of .html()
$dem.text($found.length + " records found.");
}
</script>
</body>
</html>
Thank guys I found the solution:
<script>
var $rows = $('#tabella tr');
$('#myInput').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>
This questions targets to Datatables plug-in for JQuery.
I need to loop through all table rows (even paginated) and get id of each tr element.
HTML table like this:
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr id="etc_1_en">
<td>Etc 1</td>
<td>Etc 2</td>
</tr>
<tr id="etc_1_ru">
<td>Etc 3</td>
<td>Etc 4</td>
</tr>
<tr id="etc_1_fr">
<td>Etc 5</td>
<td>Etc 6</td>
</tr>
<tr id="etc_2_en">
<td>Foo 1</td>
<td>Foo 2</td>
</tr>
<tr id="etc_2_ru">
<td>Foo 3</td>
<td>Foo 4</td>
</tr>
<tr id="etc_2_fr">
<td>Foo 5</td>
<td>Foo 6</td>
</tr>
</tbody>
</table>
So I need to loop through each row and hide row if last 2 characters is not equal to en (with this checking everything fine, I'm using substr).
I can loop through all rows in following:
tbl = $('#myTable').DataTable();
var data = tbl.rows().data();
data.each(function (value, index) {
console.log('Data in index: ' + index + ' is: ' + value);
});
But I can't find a way to get id of tr (with this sample data etc_1_en, etc_1_ru and so on). Could someone help me?
I've tried to pass in function id as parameter, but it returns - undefined.
You can loop through the rows() using rows().every(). This way you will have access to the row object, which will give you both data and id.
tbl = $('#myTable').DataTable();
tbl.rows().every(function () {
var data = this.data();
var id = this.id();
console.log('Data in id: ' + id + ' index: ' + index + ' is: ' + data);
});
More info: https://datatables.net/reference/api/rows().every()
I have a html table with a fixed number of rows, of which only the first one is visible from the beginning. Upon clicking a button, row 2 should be revealed. Upon clicking the same button again, row 3 should be revealed, and so on.
Importantly, the full table should be loaded at the beginning (each row contains a specific django formfield), so I do not want to generate additional html rows when clicking the button.
I found lots of stuff on toggling/showing table rows using jQuery, but what I want to do here is I want to show additional rows each time the button is clicked.
My idea was to first initiate and then increment a variable upon clicking in Javascript, and then show an additional row each time. I failed.
I am newbie to Javascript, any suggestions highly appreciated!
$(document).ready(function() {
var counter = 1;
var $rows = $("#fullTable tr");
$("RevealRow").click(function() {
counter++;
$rows.eq(counter).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fullTable">
<tr>
<td>Row 1</td>
</tr>
<tr style="display:none;">
<td>Row 2</td>
</tr>
<tr style="display:none;">
<td>Row 3</td>
</tr>
<tr style="display:none;">
<td>Row 4</td>
</tr>
<tr style="display:none;">
<td>Row 5</td>
</tr>
<tr style="display:none;">
<td>Row 6</td>
</tr>
</table>
<button id="RevealRow">Show more rows</button>
Try this jQuery code
$(document).ready(function () {
$("#RevealRow").click(function () {
$("#fullTable tr:visible").next().show();
});
});
HTML
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>
JS
$(document).ready(function() {
$("tr").find("td").eq(2).click(function(){
alert('hi');
});
$("tr").find("td").not().eq(2).click(function(){
alert('hi2');
});
});
What I'm trying to do here is bind a different click event for the every 3rd <td> of each row and every other <td> different click function. 1st function works but how can I bind event for the <td>'s which are not the 3rd ones?
Pass the selector to the not method.
$("tr").find("td").not(':eq(2)').click(function(){
alert('hi2');
});
http://jsfiddle.net/z9HUB/
try this out live fiddle
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi2');
});
$("tr").find("td:not(:eq(2))").click(function(){
alert('hi');
});
});
Try $("td:not(:eq(2)")
$("tr").find("td:not(:eq(2)").click(function(){
alert('hi2');
});
You could do something like this:
$(document).ready(function() {
$("tr").find("td:eq(2)").click(function(){
alert('hi');
});
$("tr").find("td:lt(2)").click(function(){
alert('hi2');
});
});