Remove extra cell spaces

Remove extra cell spaces - javascript

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>

Related

Javascript Filtering by multiple columns

Borrowing code from the post below I am able to filter on 2 columns using the || (Or) operator.
However, I'd like to be able to filter using the && (And) operator.
I have been unsuccessful in my multiple attempts. I could use some help.
Filtering table multiple columns
function myFunction() {
var input0, input1, filter0, filter1, table, tr, td, cell, i, j;
document.getElementById("myInput0").value = 'Female';
document.getElementById("myInput1").value = 'Engineering';
input0 = document.getElementById("myInput0");
input1 = document.getElementById("myInput1");
filter0 = input0.value.toUpperCase();
filter1 = input1.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
// Hide the row initially.
tr[i].style.display = "none";
td = tr[i].getElementsByTagName("td");
for (var j = 0; j < td.length; j++) {
cell = tr[i].getElementsByTagName("td")[j];
if (cell) {
if (cell.textContent.toUpperCase().indexOf(filter0)>-1 ||
cell.textContent.toUpperCase().indexOf(filter1)>-1) {
tr[i].style.display = "";
break;
}
}
}
}
}
<body>
<input type="text" id="myInput0">
<input type="text" id="myInput1">
<input type='button' onclick='myFunction()' value='click me' />
<table id="myTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>Female</td>
<td>Engineering</td>
</tr>
<tr>
<td>Thomas</td>
<td>Dubois</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Deidre</td>
<td>Masters</td>
<td>Female</td>
<td>Sales</td>
</tr>
<tr>
<td>Sean</td>
<td>Franken</td>
<td>Male</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
</body>

For each cell, you can check each filter separately, then only change the DOM for rows where all filter conditions are met.
(This example uses a restructured version of your code.)
document.getElementById("myInput0").value = 'Female';
document.getElementById("myInput1").value = 'Engineering';
const
input0 = document.getElementById("myInput0"),
input1 = document.getElementById("myInput1"),
table = document.getElementById("myTable"),
rows = table.getElementsByTagName("tr");
function myFunction() {
filter0 = input0.value.toUpperCase(),
filter1 = input1.value.toUpperCase();
for (let row of rows) {
row.classList.add("hidden");
const cells = row.getElementsByTagName("td");
let
filter0met = false,
filter1met = false;
for (let cell of cells) {
if (cell.textContent.toUpperCase().includes(filter0)) {
filter0met = true;
}
if (cell.textContent.toUpperCase().includes(filter1)) {
filter1met = true;
}
}
if (filter0met && filter1met) {
row.classList.remove("hidden");
}
}
}
.hidden {
display: none;
}
<body>
<input type="text" id="myInput0"><input type="text" id="myInput1"><input type='button' onclick='myFunction()' value='click me' />
<table id="myTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>Female</td>
<td>Service</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>Female</td>
<td>Engineering</td>
</tr>
<tr>
<td>Thomas</td>
<td>Dubois</td>
<td>Male</td>
<td>Sales</td>
</tr>
<tr>
<td>Deidre</td>
<td>Masters</td>
<td>Female</td>
<td>Sales</td>
</tr>
<tr>
<td>Sean</td>
<td>Franken</td>
<td>Male</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
</body>

After much trial and error for I was able to put together some JQuery that will dynamically search the first input, and then search those results for the second input. Note, I am using SP2016. While I've included it here in my post, I could not get the call to "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" to work. I found downloading and storing the file on my SharePoint site worked. For my requirement I wanted to display my list with grouped rows so I'm using a function to collapse the groups on load. The caveat is the groups in listview have to be configured as expanded.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!DOCTYPE html>
<html>
<head>
<SCRIPT type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></SCRIPT>
<script>
//If rows are not grouped, remove this function
$(window).load(function () {
$(".ms-commentcollapse-icon").click();
});
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = this.value.toLowerCase();
//If rows are not grouped, remove this line
$(".ms-commentexpand-icon").click();
$('.ms-listviewtable > tbody > tr').addClass('myInputMismatch').filter(function() {
return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInputMismatch');
});
$("#myInput1").on("keyup", function() {
var value = this.value.toLowerCase();
$('.ms-listviewtable > tbody > tr').addClass('myInput1Mismatch').filter(function() {
return this.innerHTML.toLowerCase().indexOf(value) > -1;
}).removeClass('myInput1Mismatch');
});
});
</script>
<style>
.myInputMismatch, .myInput1Mismatch { display: none; }
</style></head>
<input id="myInput" type="text" Placeholder="Search here 1st..."><input id="myInput1" type="text" Placeholder="Search here 2nd...">

loop over table to set the background css

My HTML table has some classes and table tag is used
Want to retain the classes as is, but all my table and tr , th or td are using td bgcolor which is an old technique.
I want to loop over the table and find if that bgcolor is defined, use the same color and convert it to a css based background color so i can print it in IE
function setBackground() {
var table = document.getElementById("table1");
//i found this in a previous stack overflow answer and tried it
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
//this is for debugging purposes... I can't even get this to work
alert(table.rows[i].cells[j]);
table.rows[i].cells[j].style.background = "orange"; //just an example
}
}
}
because IE is not able to print the background lines and colors for some reason using the webkit property

I cleaned up the for loops a little. You can read the attribute with getAttribute and set the style.
var table = document.getElementById("table1");
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i]
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j]
var bgc = cell.getAttribute('bgcolor')
if (bgc) {
cell.style.background = bgc
}
}
}
td {
width: 30px; height: 30px;
}
<table id="table1">
<tr>
<td bgcolor="red"></td>
<td></td>
<td bgcolor="blue"></td>
</tr>
<tr>
<td></td>
<td bgcolor="green"></td>
<td></td>
</tr>
<tr>
<td bgcolor="yellow"></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="silver"></td>
<td></td>
<td></td>
</tr>
</table>
You can just do it with one loop with getElementsByTagName
var tds = document.getElementById("table1").getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var cell = tds[i]
var bgc = cell.getAttribute('bgcolor')
if (bgc) {
cell.style.background = bgc
}
}
td {
width: 30px; height: 30px;
}
<table id="table1">
<tr>
<td bgcolor="red"></td>
<td></td>
<td bgcolor="blue"></td>
</tr>
<tr>
<td></td>
<td bgcolor="green"></td>
<td></td>
</tr>
<tr>
<td bgcolor="yellow"></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="silver"></td>
<td></td>
<td></td>
</tr>
</table>

Get the color if found and then do with it whatever needed...
function setBackgroundColor(colorValue) {
const table = document.getElementById("table1");
const rows = table.children[0].rows
for (let i = 0; i < rows.length; i++) {
const tds = rows[i].children;
for (let j = 0; j < tds.length; j++) {
if (tds[j].bgColor === colorValue) {
console.log('Color found, do action')
}
}
}
}
setBackgroundColor('red')
<table id="table1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td bgcolor="red">January</td>
<td bgcolor="green">$100</td>
</tr>
</table>

You can do this:
var cells = $("#targetTable td");
for(i in cells){
color = $(cells[i]).attr('bgcolor');
console.log(color);
$(cells[i]).css({background: color});
}

as Taplar mentioned in the comment :
Use document.querySelectorAll('td[bgcolor]') to get the td that have bgcolor, loop through them and set the background to that color :
document.querySelectorAll('td[bgcolor]').forEach(e => {
const bgColor = e.getAttribute('bgcolor');
e.removeAttribute('bgcolor'); // optional, if you want to remove the attribute
e.style.background = bgColor;
})
<table id="table1">
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td bgcolor="red">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td bgcolor="green">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td bgcolor="blue">9</td>
</tr>
</tbody>
</table>

Javascript - how to toggle all next singlings until class found

I have the table below which hides all the child rows by default.
I'd like to toggle all child rows right underneath the corresponding clicked root row. That is, the n .child rows next to the clicked .root. How can I do this in pure Javascript?
.hidden {
display:none;
}
<table>
<tr>
<td>Root</td>
</tr>
<tr class="hidden">
<td>Child 1</td>
</tr>
<tr class="hidden">
<td>Child 2</td>
</tr>
<tr class="hidden">
<td>Child 3</td>
</tr>
<tr class="hidden">
<td>Child 4</td>
</tr>
<tr>
<td>Root</td>
</tr>
<tr class="hidden">
<td>Child 1</td>
</tr>
<tr class="hidden">
<td>Child 2</td>
</tr>
</table>

If, what you want to do is to remove the hidden classname from all the rows after the clicked one until you get to a row that is not hidden, then you can do this:
function func(root) {
var row = root.parentNode.parentNode;
row = nextElement(row, "tr");
while (row && row.className === "hidden") {
row.className = "";
row = nextElement(row, "tr");
}
}
function nextElement(start, tag) {
tag = tag.toUpperCase();
start = start.nextSibling;
while (start) {
if (start.tagName === tag) {
return start;
} else {
start = start.nextSibling;
}
}
return start;
}
Working demo: http://jsfiddle.net/jfriend00/dvg6j9or/
Here's another version that works off the array of rows and uses a parent search to find the right level of the table:
function func(root) {
var table = findParentTag(root, "table");
var currentRow = findParentTag(root, "tr");
var rows = Array.prototype.slice.call(table.querySelectorAll("tr"));
var currentIndex = rows.indexOf(currentRow) + 1;
// now traverse rows until you find one that is different than the starting row
for (; currentIndex < rows.length; ++currentIndex) {
if (rows[currentIndex].className.indexOf("hidden") !== -1) {
rows[currentIndex].className = "";
} else {
break;
}
}
}
function findParentTag(start, tag) {
tag = tag.toUpperCase();
while (start && start.tagName !== tag) {
start = start.parentNode;
}
return start;
}
Working demo: http://jsfiddle.net/jfriend00/hut56fLg/

Finding the matching value in an HTML table and highlighting it

I need your help.
Because of the way my data will be structured. I need to create some sort of a function that will allow a user to input the record number from column 1 into the input box "record". Then at the click of a button, the code will find the exact matching value from column 1 in my data table and select the row using the existing code to highlight it. I can't seem to be able to put together some sort of logic as to how to make this work.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
color: #235A81;
background-color: white;
}
#data tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
return GoTo('data', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
return GoTo('data', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
}//end of nested function
</script>
</head>
<body onload="test()">
<table style="cursor: default;" id="data" cellspacing="1" border="1">
<thead>
<tr>
<th>Record #</th>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr>
<td>3</td>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>1</td>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>4</td>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>2</td>
<td>benjamin</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Example: type the record's number in the input box and then select it:
<input type="text" id="record" />
</body>
</html>

I'm still having trouble getting the big picture of what you're trying to do, but I wrote a function to grab the tr whose first td contains the record.
function findTrForRecord(record) {
var nodelist = document.getElementById('data').getElementsByTagName('tr');
for (var i = 0; i < nodelist.length; i++) {
var tr = nodelist.item(i);
var tds = tr.getElementsByTagName('td');
if (tds.length > 0 && tds[0].innerHTML.trim() == record)
return tr;
}
}
From there, you can highlight it or do whatever you want.
/**
* unhighlights previous row and highlights new row
* that matches the record
*/
button.onclick = function () {
var trs = document.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++)
if (trs[i].className.indexOf('highlighted') > 0) {
trs[i].className.replace('highlighted','');
break;
}
var record = document.getElementById('record').value;
var tr = findTrForRecord(record);
tr.className += ' highlighted';
}

I edited your html file you provided. Check this out. http://pastebin.com/Wz0EdBMV

Pure Javascript: onClick toggle rows/ image: Firefox/Chrome - works: IE - does not work

Got some great help from Zeb Rawnsley (you rock!) on resolving the preceding question to my current issue.
Working with some code to allow subordinate rows to be hidden via a collapsible link behind an image. This works perfectly fine in Firefox and Chrome but the image does not alternate after the first iteration in IE (IE 8 specifically my company's standard).
The section of interest is here (I think):
var closedImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png\" border=\"0\" height=\"50\">";
var openImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png\" border=\"0\" height=\"50\">";
and possibly here (but I don't think so):
lnk.innerHTML =(lnk.innerHTML == openImgHTML)?closedImgHTML:openImgHTML;
This CodePen is for the working version (Firefox/Chrome):
http://codepen.io/anon/pen/yjLvh
This is the HTML for the working version:
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
var toggleimage=new Array("http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png","http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png")
var closedImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png\" border=\"0\" height=\"50\">";
var openImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png\" border=\"0\" height=\"50\">";
function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == openImgHTML)?closedImgHTML:openImgHTML;
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link =''+closedImgHTML+'';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
var preload_image_1=new Image()
var preload_image_2=new Image()
preload_image_1.src=toggleimage[0]
preload_image_2.src=toggleimage[1]
var i_image=0
function testloading() {
isloaded=true
}
function toggle() {
if (isloaded) {
document.togglepicture.src=toggleimage[i_image]
}
i_image++
if (i_image>1) {i_image=0}
}
window.onload = function() { if (oldEvt) oldEvt(); toggleRows(); testloading();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR>
</THEAD>
<TBODY>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD><i>Georgia District Reps</i></TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD><i>Texas District Reps</i></TD>
<TD>630000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE>
<br>
<br>
</body>
</html>
The prior set of code without the images (using text for open/close) worked fine in all browsers.
Not sure if there is an image syntax issue in IE or something else. It most certainly is focused on the images since, well, it works fine without images.
Here is the CodePen for the version (text based) working in IE (and others).
http://codepen.io/anon/pen/morpF
Here is the HTML for the "ALL" browser version"
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == "+")?"--":"+";
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link ='+';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
window.onload = function() { if (oldEvt) oldEvt(); toggleRows();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH width="10%" bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR></THEAD>
<TBODY>
<TR class="cell">
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>&nbsp</TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD> </TD>
<TD>620000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE></body>
</html>
Thanks!

Different browsers serialize the DOM differently. Running your code in IE10 gives me this:
foo.innerHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png\" border=\"0\" height=\"50\">";
foo.innerHTML; // <img name="togglepicture" height="50" src="http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png" border="0">
IE rearranged the attributes, so you no longer have the same string.
Instead of getting the HTML inside the link element, get the image itself and look at its src property.

Develop Reference

JavaScript is the programming language of the Web.

Remove extra cell spaces - javascript

Related

Javascript Filtering by multiple columns

loop over table to set the background css

Javascript - how to toggle all next singlings until class found

Finding the matching value in an HTML table and highlighting it

Pure Javascript: onClick toggle rows/ image: Firefox/Chrome - works: IE - does not work

Categories

Resources