I want to hide a table if its "td" empty.
I'm trying to use this function, but it's not working:
function isEmptyTable(){
var tdTable = document.getElementsByName('tdTable').textContent;
var table = document.getElementsByName('tableToday');
if(tdTable == "")
table.style.display = 'none';
}
Any tips?
HTML:
<body onload="isEmptyTable()">
<table name="tableToday">
<thead>
<tr>
<th>Prêmio</th>
<th>Resultado</th>
<th>Grupo</th>
</tr>
</thead>
<tbody>
<tr>
<th>1º</th>
<td name="tdTable">oi</td>
<td name="tdTable"></td>
</tr>
</tbody>
</table>
I'd use the getElementById and the getElementsByClassName selectors to achieve this:
function isEmptyTable(myId){
let tds = document.getElementsByClassName(myId);
let hide = false
for (let element of tds) {
if (element.innerHTML.length == 0) hide = true
}
let myTable = document.getElementById(myId);
if (hide) myTable.style.display = 'none';
}
isEmptyTable("myTable")
isEmptyTable("myTable2")
td {
border: 1px solid red;
}
<table id="myTable">
<tr>
<td class="myTable"></td>
<td class="myTable">
lololo
</td>
</tr>
</table>
<table id="myTable2">
<tr>
<td class="myTable2">asdasd</td>
<td class="myTable2">
lololo
</td>
</tr>
</table>
in your code just change these two lines. because the td will return in collection so use array index [0]
function isEmptyTable(){
var tdTable = document.getElementsByName('tdTable')[0].textContent;
var table = document.getElementsByName('tableToday')[0];
if(tdTable == "")
table.style.display = 'none';
}
it will work fine.
The problem is in the part:
var tdTable = document.getElementsByName('tdTable').textContent;
and
table.style.display = 'none';
Because the function document.getElementsByName() doesn't return a simple variable , it's return an array , so to solve the problem you have to change the part:
var tdTable = document.getElementsByName('tdTable').textContent;
to
var tdTable = document.getElementsByName('tdTable')[0].textContent;
and change table.style.display = 'none'; to table[0].style.display = 'none';
For more information about document.getElementsByName() Click here
Related
I have a script below:
var cells = [].slice.call(document.querySelectorAll("#myTable td"));
var search = document.getElementById("myInput");
search.addEventListener("keyup", function() {
cells.forEach(function(cell) {
if (!search.value.trim()) {
cell.style.background = "white";
cell.style.display = 'table-cell';
} else if (cell.textContent.toLowerCase().indexOf(search.value.toLowerCase()) == 0) {
cell.style.background = 'yellow';
cell.style.display = "table-cell";
} else {
cell.style.background = "white";
cell.style.display = 'none';
}
});
});
<input id='myInput' type='text'>
<table id='myTable'>
<tr>
<td>a</td>
<td>ab</td>
<td>abs</td>
<td>ador</td>
<td>turous</td>
<td>acac</td>
<td>accle</td>
</tr>
<tr>
<td>ed</td>
<td>aced</td>
<td>ate</td>
<td>acg</td>
<td>aci</td>
<td>atic</td>
<td>ive</td>
</tr>
<tr>
<td>l</td>
<td>pt</td>
<td>able</td>
<td>ad</td>
<td>adoent</td>
<td>ble</td>
<td>d</td>
</tr>
<tr>
<td>ed</td>
<td>a</td>
<td>aate</td>
<td>a</td>
<td>aavating</td>
<td>aive</td>
<td>a</td>
</tr>
<tr>
<td>d</td>
<td>ng</td>
<td>eable</td>
<td></td>
<td>alarmed</td>
<td>ming</td>
<td>t</td>
</tr>
<tr>
<td>ted</td>
<td>ae</td>
<td>all</td>
<td>agjhistic</td>
<td>akjhkjg</td>
<td>hjious</td>
<td>ample</td>
</tr>
<tr>
<td>hjbsed</td>
<td>ahkjng</td>
<td>anhjkd</td>
<td>ahjhnt</td>
<td>ahjkjc</td>
<td>a</td>
<td>hjhed</td>
</tr>
<tr>
<td>aghjed</td>
<td>hjjal</td>
<td>ghjmher</td>
<td>amjhkiue</td>
<td>ahkjus</td>
<td>any</td>
<td>ahmkjehensive</td>
</tr>
<tr>
<td>ajhjkjiate</td>
<td>ahkjpt</td>
<td>arctic</td>
<td>arid</td>
<td>aromatic</td>
<td>artistic</td>
<td>ashamed</td>
</tr>
<tr>
<td>assured</td>
<td>astonishing</td>
<td>athletic</td>
<td>attached</td>
<td>attentive</td>
<td>atkjkjactive</td>
<td>ahghbtere</td>
</tr>
<tr>
<td>bhkuhish</td>
<td>hkjh</td>
<td>bhkre</td>
<td>barren</td>
<td>basic</td>
</tr>
<tr>
<td>befsgdfgful</td>
<td>bdsfsdfed</td>
<td>dsfsdfved</td>
<td>bedsfsfcial</td>
<td>better</td>
<td>best</td>
<td>bdfsfitched</td>
</tr>
</table>
I use this script for searching text with an HTML table. It have more than 500 cells like 100 rows and 5 columns etc. This script works well for finding text within a short table but when I search anything it also display gap of rows and columns, if i have a long table which has more than 500 cells.
Here I tried to used regular expressions like \s and /g but it doesn't work, may be I insert them on wrong place. Also I tried to change cell.style.display = "table-cell"; with many other style but doesn't work.
Can any one properly guide me what and where I have to put exactly to get output properly without rows/columns gap if i have more than 500 cells and what that mean with syntax description.
Try this! =)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="input"/>
<div class="print"></div>
<script>
var data = ['food', 'bar', 'google']; // your data
var fx = function(text) {
var print = function(list,s) {
var table = $('<table/>').css('width','100%');
var x = 0;
while (list[x]) {
var tr = $('<tr/>');
while (list[x] && x < 5) {
var td = $('<td/>').text(list[x])
if(s == list[x]){
td.css('background','red');
}
tr.append(td);
x++;
}
table.append(tr);
}
$('.print').html(table);
}
if (typeof text === "undefined") {
print(data, '');
} else {
var find = [];
for (var i = 0; data[i]; i++) {
if (data[i].toLowerCase().indexOf(text.toLowerCase()) == 0) find[find.length] = data[i];
}
print(find,text);
}
}
$(function() {
$('.input').keyup(function() {
fx($(this).val());
});
fx();
});
</script>
i have a dynamic table like this:
<table cellspacing="0" cellpadding="0">
<col width="80" span="3">
<tr id="id-1">
<th colspan="3" width="240">TITLE-1</th>
</tr>
<tr>
<td>val-1</td>
<td>val-2</td>
<td>val-3</td>
</tr>
<tr id="id-1">
<th colspan="3">TITLE-1</th>
</tr>
<tr>
<td>val-2</td>
<td>val-2</td>
<td>val-3</td>
</tr>
<tr id="id-2">
<th colspan="3">TITLE-2</th>
</tr>
<tr>
<td>val-1</td>
<td>val-2</td>
<td>val-2</td>
</tr>
</table>
In this table is 3 TR element with same ID. i want to remove all TR except first TR.
If not is duplicate IDs nothing change with this TR.
And i need also: in TR's is 3 td's. result must be next. if value is same group this td's:
<tr>
<td>val-2</td>
<td>val-2</td>
<td>val-3</td>
</tr>
result
<tr>
<td colspan="2">val-2</td>
<td>val-3</td>
</tr>
tnx
i changed id > class
$(".idxx:gt(0)").remove();
I did a function to parse tr's and td's. See here http://jsfiddle.net/mig1098/qo4xvqjm/ :
var mapTable={
_tr:function(){
var tabletr = $('table tr');
var compareid = '';
tabletr.each(function(){
var id = $(this).attr('id');
if(typeof id != 'undefined'){
if(compareid == ''){
compareid = id;
}else if(compareid == id){
$('#'+id).next().remove();
$('#'+id).remove();
}
}
});
},
_td:function(){
tabletr = $('table tr');
tabletr.each(function(){
var tdtext = {"obj":"","txt":"","count":1};
console.log($(this).find('th').text());
$(this).find('td').each(function(){
var td = $(this);
if(tdtext.txt == ''){
tdtext.txt = td.text();
tdtext.obj = td;
}else if(tdtext.txt == td.text()){
tdtext.count +=1;
td.hide();
td.addClass('todelete');
}else{
//before to change
tdtext.obj.attr('colspan',tdtext.count);
//
tdtext = {"obj":td,"txt":td.text(),"count":1};
}
});
if(tdtext.count > 1){
tdtext.obj.attr('colspan',tdtext.count);
}
$('.todelete').remove();
});
},
init(){
mapTable._tr();
mapTable._td();
}
}
My HTML format looks like this :
<body>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
</body>
I want to hide all buttons without using class and ID. I've tried everything to hide the buttons but its not working.
What I've tried is something like this :
document.getElementsByTagName('input').style.visibility = "hidden";
and
input_list = document.getElementsByTagName('input');
for (element in input_list) {
element.style.visibility = "hidden";
}
if you want to hide all buttons in your form use
$("input[type^=button]").each(function (index) {
$(this).hide();
});
UPDATE: may be this could help you
var ele = document.getElementsByTagName("input");
if (ele.length > 0) {
for (i = 0; i < ele.length; i++) {
if (ele[i].type == "button")
ele[i].style.display = "none";
}
}
I hope this will make u sense with javascript
var i =document.getElementsByTagName("input");
for( var n in i){
if(i[n].type = "button"){
alert("hide button "+n);
i[n].style.visibility = "hidden";
}
}
<body>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
</body>
You can use jquery to hide all buttons
Just use
$('input').hide();
Check this fiddle -> https://fiddle.jshell.net/c8tqvy0r/
You can write in jquery
jQuery('input[type="button"]').hide();
or through css you can give
input[type="button"]{
display:none;
}
or
input[type="button"]{
opacity:0;
}
Instead of using
for (element in input_list)
use
for(var i=0; i < input_list.length; i++){
input_list[i].style.visibility = "hidden";
}
I have up to three almost-identical divs that contain tables of usernames. Some names may be repeated across the three divs. I'd like to highlight the names that are repeated. The first occurrence of the user should not be colored, the second occurrence should have an orange background and the third should have a red background. The divs go from left to right in order so the first div should not have any highlighted usernames.
My HTML looks like:
<div class="col-md-4">
<table class="table table-striped">
<tr>
<th>2/26/2014</th>
</tr>
<tr>
<td>user1</td>
</tr>
<tr>
<td>user2</td>
</tr>
<tr>
<td>user5</td>
</tr>
<tr>
<td>user17</td>
</tr>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<tr>
<th>2/27/2014</th>
</tr>
<tr>
<td>user13</td>
</tr>
<tr>
<td>user5</td>
</tr>
<tr>
<td>user7</td>
</tr>
</table>
</div>
<div class="col-md-4">
<table class="table table-striped">
<tr>
<th>2/28/2014</th>
</tr>
<tr>
<td>user5</td>
</tr>
<tr>
<td>user45</td>
</tr>
<tr>
<td>user1</td>
</tr>
</table>
</div>
I know that the username table cells will be selected with $('table.table td') (if I use jQuery) but I'm not sure what to do from there.
Please let me know if you have any questions.
Thank you.
Is this what you want?
I created a map to store text-occurrence pairs. Each time the text is repeated, the counter associated with it gets incremented. If the counter climbs to a certain value, the background will be set to another color. Give it a shot!
DEMO
var map = new Object();
$('td').each(function() {
var prop = $(this).text()
var bgColor = '#FFFFFF';
if (map[prop] > 1) {
bgColor = '#FF0000';
} else if (map[prop] > 0) {
bgColor = '#FF7F00';
}
$(this).css('background', bgColor);
if (map.hasOwnProperty(prop)) {
map[prop]++;
} else {
map[prop] = 1;
}
});
You could try something like this but I didn't test it
$('td').each(function(){
var text = this.html();
$('td:contains("'+text+'"):nth-child(2)').css({'background':'orange'});
$('td:contains("'+text+'"):nth-child(3)').css({'background':'red'});
});
Edit:
Not particularly elegant but it seems to work
http://jsfiddle.net/63L7L/1/
var second = [];
var third = [];
$('td').each(function(){
var text = $(this).html();
second.push($("td").filter(function() {
return $(this).text() === text;
})[1])
third.push($("td").filter(function() {
return $(this).text() === text;
})[2])
});
$(second).each(function(){
$(this).css({'background':'red'});
});
$(third).each(function(){
$(this).css({'background':'orange'});
});
With pure Javascript (ECMA5)
CSS
.orange {
background-color:orange;
}
.red {
background-color:red;
}
Javascript
Array.prototype.forEach.call(document.querySelectorAll('.table-striped td'), function (td) {
var textContent = td.textContent;
if (this.hasOwnProperty(textContent)) {
td.classList.add(++this[textContent] === 2 ? 'orange' : 'red');
} else {
this[textContent] = 1;
}
}, {});
On jsFiddle
<table>
<tr>
<td class = "nowrap cr" id="cr1">123123</td>
<td class = "nowrap ch" id="ch1">123123</td>
</tr>
<tr>
<td class = "nowrap cr" id="cr2">123123</td>
<td class = "nowrap ch" id="ch2">123123</td>
</tr>
<tr>
<td class = "nowrap cr" id="cr3">467574</td>
<td class = "nowrap ch" id="ch3">123123</td>
</tr>
</table>
How do I set the font-weight: bold in tr where chID == crID
I have written JS code as below
$(function () {
for (var i = 0; i < 20; i++)
{
if ($('#cr' + i).val() == $('#ch' + i).val())
{
$('#cr' + i).parent().css('font-weight', 'bold');
}
}
});
But it's not working.
Let me know how should I achieve desired output?
val() is for input elements only. You need to use
if($('#cr'+i).html() == $('#ch'+i).html())
or, to compare the textual value only (which is probably what you want)
if($('#cr'+i).text() == $('#ch'+i).text())