jQuery DataTable multi rows header

jQuery DataTable multi rows header - javascript

I used jQuery DataTable to show some data.
Here is my code.
I tried to add collapse/expand using bootstrap collapse functionality.
So I made two rows.
But if you see console it throws an javascript error so code below it not running.
How can I fix this?
Here is html code:
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td>aaa</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td>aaa</td>
</tr>
</tbody>
</table>

Not feeling good using this approach:
Because of search, the sort, etc will break the concept of <tr> as header and it's next <tr> as content.
Maybe you can achieve the same thing using a different approach, like you can have child rows like here. But you can also fix the above problem as below:
JS Fiddle
HTML
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td colspan="4">aaa</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td colspan="4">aa2</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
</tbody>
</table>
JS
$("#taskTable").dataTable({
"ordering": false
});

Related

how can i collapse all table rows

i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it.
this is my code
tbody.collapse.in {
display: table-row-group;
}
.tigray {
background-color: darkcyan;
}
.zoba {
background-color: forestgreen;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
</tbody>
</table>

You can not use tbody inside another tbody
it is not legal HTML.
Follow this code ↓↓
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</table>
However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody >
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

RTL resize able columns

When using RTL, the colums go crazy on resize ...
I'm using colResizable. Here is an example:
http://jsfiddle.net/r0rfrhb7/
$("#nonFixedSample").colResizable({
fixed: false,
liveDrag: true,
gripInnerHtml: "<div class='grip2'></div>",
draggingClass: "dragging"
});
and the simple table code
<table dir="RTL" id="nonFixedSample" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td class="left">cellaaaaaaaaaaaa</td>
<td>cell</td>
<td class="right">cellaaaaaaaaaa</td>
</tr>
<tr>
<td class="left">celaaaaaaaaaaaal</td>
<td>cell</td>
<td class="right">ceaaaaaall</td>
</tr>
<tr>
<td class="left bottom">celaaaaal</td>
<td class="bottom">celaaaaaaaaaaaaaaaal</td>
<td class="bottom right">celaaaaaaaal</td>
</tr>
</table>
what can i do ?
thanks

Open a bug on the author of the library. But they say they won't support it
http://github.com/alvaro-prieto/colResizable/issues/69

Javascript function executed before previous function is done

I have a webpage that contains a couple of tables.
At the beginning it checks the language and sets the corresponding translations.
At the end of the html file (after all the elements are loaded) the translations are set using javascript.
After that variables are requested via wifi.
This is what I see when I load the page.
The elements that don't need translation are shown before set_language_for_raw_data_() is executed.
I have checked Chrome's developer tools and saw this.
It shows that set_language_for_raw_data_() is executed before Raw_Data_Requests(), but it does not show until Raw_Data_Requests() is done.
Is there a way to show the translations before Raw_Data_Requests() is executed?
Raw_data.html:
<!DOCTYPE HTML>
<html>
<head>
<script>
checkLanguage(); //load language setting or use system default
</script>
</head>
<body>
<div id="site_unresponsive">
<div id="inhalt">
<h2 class="middle white_font expander" onclick="expander('raw_data')" id="raw_data_title"></h2>
<ul class="hidden" id="raw_data">
<table cellspacing="0" id="actual_meas">
<tr>
<td id="loading" style="display:none">Error: Connection lost</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(0)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(1)">..</td>
</tr>
<tr class="odd">
<td>Ubat</td>
<td id="Meas(2)">..</td>
</tr>
<tr>
<td>Ibat</td>
<td id="Meas(5)">..</td>
</tr>
<tr class="odd">
<td>U PWM</td>
<td id="Meas(9)">..</td>
</tr>
<tr>
<td style="color:darkorange">LED</td>
<td id="Meas(11)">•</td>
</tr>
<tr class="odd">
<td style="color:green">LED</td>
<td id="Meas(12)">•</td>
</tr>
<tr>
<td></td>
<td id="Meas(19)">..</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(20)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(100)">..</td>
</tr>
</table>
</ul>
<h2 class="middle white_font expander" onclick="expander('version')" id="version_title"></h2>
<div class="hidden" id="version">
<table cellspacing="0" class="data_tab" id="version_details">
<tr>
<th></th>
</tr>
<tr class="odd">
<td id="device_version">~DeviceVersion~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cumulatives')" id="cumulatives_title"></h2>
<ul class="hidden" id="cumulatives">
<li class="w300">
<table cellspacing="0" id="cuml">
<tr class="odd">
<td></td>
<td>~Cumulatives(0)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(1)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(2)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(3)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(4)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(5)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(6)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(7)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(8)~</td>
</tr>
<tr>
<td></td>
<td style="white-space:nowrap;">~Cumulatives(14)~</td>
</tr>
</table>
</li>
</ul>
<h2 class="middle white_font expander" onclick="expander('error')" id="error_title"></h2>
<div class="hidden" id="error" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="error_history">
<tr>
<th>Nr</th>
<th></th>
<th></th>
<th></th>
<th>U</th>
<th>I</th>
<th>PWM</th>
<th>T</th>
</tr>
<tr class="odd">
<td>1</td>
<td>~ErrorHistory(0,2,0)~</td>
<td>~ErrorHistory(0,3,0)~</td>
<td>~ErrorHistory(0,4,0)~</td>
<td>~ErrorHistory(0,5,0)~</td>
<td>~ErrorHistory(0,6,0)~</td>
<td>~ErrorHistory(0,7,0)~</td>
<td>~ErrorHistory(0,8,0)~</td>
</tr>
<tr>
<td>2</td>
<td>~ErrorHistory(1,2,0)~</td>
<td>~ErrorHistory(1,3,0)~</td>
<td>~ErrorHistory(1,4,0)~</td>
<td>~ErrorHistory(1,5,0)~</td>
<td>~ErrorHistory(1,6,0)~</td>
<td>~ErrorHistory(1,7,0)~</td>
<td>~ErrorHistory(1,8,0)~</td>
</tr>
<tr class="odd">
<td>3</td>
<td>~ErrorHistory(2,2,0)~</td>
<td>~ErrorHistory(2,3,0)~</td>
<td>~ErrorHistory(2,4,0)~</td>
<td>~ErrorHistory(2,5,0)~</td>
<td>~ErrorHistory(2,6,0)~</td>
<td>~ErrorHistory(2,7,0)~</td>
<td>~ErrorHistory(2,8,0)~</td>
</tr>
<tr>
<td>4</td>
<td>~ErrorHistory(3,2,0)~</td>
<td>~ErrorHistory(3,3,0)~</td>
<td>~ErrorHistory(3,4,0)~</td>
<td>~ErrorHistory(3,5,0)~</td>
<td>~ErrorHistory(3,6,0)~</td>
<td>~ErrorHistory(3,7,0)~</td>
<td>~ErrorHistory(3,8,0)~</td>
</tr>
<tr class="odd">
<td>5</td>
<td>~ErrorHistory(4,2,0)~</td>
<td>~ErrorHistory(4,3,0)~</td>
<td>~ErrorHistory(4,4,0)~</td>
<td>~ErrorHistory(4,5,0)~</td>
<td>~ErrorHistory(4,6,0)~</td>
<td>~ErrorHistory(4,7,0)~</td>
<td>~ErrorHistory(4,8,0)~</td>
</tr>
<tr>
<td>6</td>
<td>~ErrorHistory(5,2,0)~</td>
<td>~ErrorHistory(5,3,0)~</td>
<td>~ErrorHistory(5,4,0)~</td>
<td>~ErrorHistory(5,5,0)~</td>
<td>~ErrorHistory(5,6,0)~</td>
<td>~ErrorHistory(5,7,0)~</td>
<td>~ErrorHistory(5,8,0)~</td>
</tr>
<tr class="odd">
<td>7</td>
<td>~ErrorHistory(6,2,0)~</td>
<td>~ErrorHistory(6,3,0)~</td>
<td>~ErrorHistory(6,4,0)~</td>
<td>~ErrorHistory(6,5,0)~</td>
<td>~ErrorHistory(6,6,0)~</td>
<td>~ErrorHistory(6,7,0)~</td>
<td>~ErrorHistory(6,8,0)~</td>
</tr>
<tr>
<td>8</td>
<td>~ErrorHistory(7,2,0)~</td>
<td>~ErrorHistory(7,3,0)~</td>
<td>~ErrorHistory(7,4,0)~</td>
<td>~ErrorHistory(7,5,0)~</td>
<td>~ErrorHistory(7,6,0)~</td>
<td>~ErrorHistory(7,7,0)~</td>
<td>~ErrorHistory(7,8,0)~</td>
</tr>
<tr class="odd">
<td>9</td>
<td>~ErrorHistory(8,2,0)~</td>
<td>~ErrorHistory(8,3,0)~</td>
<td>~ErrorHistory(8,4,0)~</td>
<td>~ErrorHistory(8,5,0)~</td>
<td>~ErrorHistory(8,6,0)~</td>
<td>~ErrorHistory(8,7,0)~</td>
<td>~ErrorHistory(8,8,0)~</td>
</tr>
<tr>
<td>10</td>
<td>~ErrorHistory(9,2,0)~</td>
<td>~ErrorHistory(9,3,0)~</td>
<td>~ErrorHistory(9,4,0)~</td>
<td>~ErrorHistory(9,5,0)~</td>
<td>~ErrorHistory(9,6,0)~</td>
<td>~ErrorHistory(9,7,0)~</td>
<td>~ErrorHistory(9,8,0)~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cycle')" id="cycle_title"></h2>
<div class="hidden" id="cycle" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="cycle_history" style="layout:fixed">
<tr>
<th>Nr</th>
<th>Ah</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody id="extended_cycles">
</tbody>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('error_tab')" id="error_tab_title">EEPROM data</h2>
<div class="hidden" id="error_tab" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="eeprom_data">
<tr>
<td>00: ~EEPROM(0)~</td>
</tr>
<tr>
<td>10: ~EEPROM(1)~</td>
</tr>
<tr>
<td>20: ~EEPROM(2)~</td>
</tr>
<tr>
<td>30: ~EEPROM(3)~</td>
</tr>
<tr>
<td>40: ~EEPROM(4)~</td>
</tr>
<tr>
<td>50: ~EEPROM(5)~</td>
</tr>
<tr>
<td>60: ~EEPROM(6)~</td>
</tr>
<tr>
<td>70: ~EEPROM(7)~</td>
</tr>
<tr>
<td>80: ~EEPROM(8)~</td>
</tr>
<tr>
<td>90: ~EEPROM(9)~</td>
</tr>
<tr>
<td>A0: ~EEPROM(10)~</td>
</tr>
<tr>
<td>B0: ~EEPROM(11)~</td>
</tr>
<tr>
<td>C0: ~EEPROM(12)~</td>
</tr>
<tr>
<td>D0: ~EEPROM(13)~</td>
</tr>
<tr>
<td>E0: ~EEPROM(14)~</td>
</tr>
<tr>
<td>F0: ~EEPROM(15)~</td>
</tr>
</table>
</div>
<br>
</div>
<script>
set_language_for_raw_data_();
Raw_Data_Requests();
</script>
</div>
</body>
</html>
set_language_for_raw_data_():
document.getElementById("menu_title").innerHTML = d12;
document.getElementById("raw_data_title").innerHTML = t5;
document.getElementById("version_title").innerHTML = t7;
document.getElementById("cumulatives_title").innerHTML = t8;
document.getElementById("error_title").innerHTML = t9;
document.getElementById("cycle_title").innerHTML = t11;
checkLanguage():
language = getCookie("language");
if (language == "")
applySystemLanguage();
setTranslations(language);
setTranslations(language):
switch (language){
default:
case "en":
d12="Show RAW data";
t5="Real time measurements";
t7="Version";
t8="Cumulatives";
t9="Error history";
t11="Cycle history";
break;
}

With rxjs you can do someting like
set_language_for_raw_data_(){
//Your code
return Observable.of(language );
}
set_language_for_raw_data_().subscribe(() => Raw_Data_Requests());
Here, you wait until the set_language_for_raw_data_ returns an observable. You can then subscribe on it. From the moment the observable is completed, it will call the next function.
The complete explanation you can find on http://reactivex.io/, But take some time and check how Observables are working

What I did to make the translations show was add a timeout:
set_language_for_raw_data_();
setTimeout(function(){
Raw_Data_Requests();
}, 20);
Apparently this was enough time for the html to be shown/updated.

redirection to a specific location on click event not working with Internet Explorer but working on Mozilla and Chrome

Below code is working fine with Mozilla and Chrome, but not with Internet explorer. Here, from first page (div 12), I am trying to go to a specific location on next page(div 8) by click event. I tried everything and searched on internet but not able to find a solution. Can anyone please help me out with this?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table
{
border-collapse:collapse;
}
#table8{
display: none;
}
th
{
background-color:#bababa;
color:white;
font-family:"Arial";
}
button{
font-size: 20px;
}
a:link {color:blue;}
a:visited {color:purple;}
a:hover {color:red;}
a:active {color:red;}
a.bigsize:hover {font-size:90%;}
.some{
width:50px;
}
</style>
<script>
function show(nr){
document.getElementById("table8").style.display="none"; <!-- Shows -->
document.getElementById("table12").style.display="none"; <!-- Shows -->
document.getElementById("table"+nr).style.display="block";
}
</script>
</style>
<div id="table12">
<h2><section id="back223">Values</section></h2>
<br><br>
<table border=1 cellpadding=7>
<tr><th>Table name</th>
</tr>
<tr bgcolor="#ffffe6"><td><a onclick='show(8);' href="#linkc1" name="linkc1">IPAddress</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc2" name="linkc2">IP_ROUTE1</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc3" name="linkc3">IP_ROUTE2</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc4" name="linkc4">IP_ROUTE3</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc5" name="linkc5">IP_ROUTE4</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc6" name="linkc6">IP_ROUTE5</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc7" name="linkc7">IP_ROUTE6</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc8" name="linkc8">IP_ROUTE7</a></td>
</tr>
<tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc9" name="linkc9">IP_ROUTE8</a></td>
</tr>
</table>
</div>
<div id="table8">
<div style="position:fixed;right:40px;top:20px;">
<a name="t12" href="#t12" onclick='show(12);'><button style="height: 35px; width: 85px"> Back </button></a>
</div>
<h2>Values</h2>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc1">IPAddress </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>Type</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#e6ffff">
<td>Dns</td>
<td>1</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc2">IP_ROUTE1 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>0.0.0.0</td>
<td>0</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc3">IP_ROUTE2 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>1.1.1.1</td>
<td>1</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc4">IP_ROUTE3 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>2.2.2.2</td>
<td>2</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc5">IP_ROUTE4 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>3.3.3.3</td>
<td>3</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc6">IP_ROUTE5 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>4.4.4.4</td>
<td>4</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc7">IP_ROUTE6 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>5.5.5.5</td>
<td>5</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc8">IP_ROUTE7 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>6.6.6.6</td>
<td>6</td>
</tr>
</table>
<br><br><br><br>
<table border=1 cellpadding=7>
<tr bgcolor="#dddddd">
<th colspan=2 align="left"><section id="linkc9">IP_ROUTE8 </section></th>
</tr>
<tr bgcolor="#f7f1ba">
<td align="center"><b>IP</b></td>
<td align="center"><b>Id</b></td>
</tr>
<tr bgcolor="#d4ffc6">
<td>7.7.7.7</td>
<td>7</td>
</tr>
</table>
</div>
</body>
</html>
EDIT: Added pics to show the issue clearly.
INPUT: This is the first page where you will click a link out of the list. So, I am clicking IP_ROUTE4 on this page.
EXPECTED BEHAVIOUR: This is what is supposed to be the expected behaviour. On first page, I clicked on IP_ROUTE4, so this table should appear on top so that user don't have to scroll and search for it.
BEHAVIOUR IN IE: This is what is happening with IE. It is redirecting me to the top of the page instead of the table IP_ROUTE4.

I tried to make your example work in IE8 using mainly articles:
HTML anchor link - href and onclick both?
Disable onClick event if anchor href link was executed
window.location = #anchor doesn't work in IE
javascript location.hash refreshing in IE
window.location.hash issue in IE7
http://caniuse.com/#search=section
Internet Explorer 8 compatibility issues
http://html5please.com/#gtie7
ScrollIntoView For Table Row Not Working in IE 8
I'm giving this up as a useless way of spending time. I can only recommend you to support Modern Browsers.
Internet Explorer is known to be lot of pain for developers for ages. Due to lack of support for standards, proprietary extensions etc. It had improved lately, but not in IE8.
IE 8.0.6001.18702 on my machine in the HTML5test - How well does your browser support HTML5? shows only 43 out of 555 points. e.g. it does not support <section> element that you use as the anchor target..
If you really have to support IE8 then check the above links for some tips or use some library, like jQuery 1.x, that has all those hacks, workarounds and polyfills built in.

jQuery Text Replace

Have some text that needs to be replaced, searched around this website for all results with similar titles and no luck.
Currently the text is Handling Fee: and I need it to say Shipping Insurance: - Please Help!
Here's the html output of the page;
<div class="c3 right">
<h2>Order Summary</h2>
<table class="styledtable">
<thead>
<tr>
<th>Quantity</th>
<th>Product</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">1</td>
<td><strong>ACT Clutch Kit - Heavy Duty (HD) (DC1-HDSS)</strong>
<div class="order_item_notes">HD Clutch Kit<br/> Performance Street Disc (SS)</div>
<div class="order_item_specs">
Components : D018, 3001532, ATCP23<br/>
</div>
</td>
<td style="text-align:right">$314.25</td>
<td style="text-align:right">$314.25</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Items Total</td>
<td style="text-align:right">$<span id="itemstotal">314.25</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Shipping:</td>
<td style="text-align:right">$<span id="shippingtotal">TBD</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Handling Fee:</td>
<td style="text-align:right">$<span id="handlingfee">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Tax:</td>
<td style="text-align:right">$<span id="taxtotal">0.00</span></td>
</tr>
<tr>
<td colspan="3" style="text-align:right">Order Total:</td>
<td style="text-align:right">$<span id="total">0.00</span></td>
</tr>
</tbody>
</table>
<p>Upon checkout, you <strong>must enter</strong> your cars <strong>year, make and model</strong> into the comments section at the bottom of this page. <strong> We will not complete your order if we do not have this information!</strong></p>
<p> </p>
</div>
</div>

You can use a jQuery :contains selector:
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
You can see it in action here: http://jsfiddle.net/cnhYj/
Update
in order to get it to work after the document is ready you can write it like that:
$(function() {
$("td:contains('Handling Fee:')").text("Shipping Insurance:");
});

$("td:contains('Handling Fee:').text('Shipping Insurance');

I don't see any javascript there just html
you want to turn this..
<td colspan="3" style="text-align:right">Handling Fee:</td>
into this...
<td colspan="3" style="text-align:right">Shipping Insurance:</td>

We Keep Coding

JavaScript is the programming language of the Web.

jQuery DataTable multi rows header - javascript

Related

how can i collapse all table rows

RTL resize able columns

Javascript function executed before previous function is done

redirection to a specific location on click event not working with Internet Explorer but working on Mozilla and Chrome

jQuery Text Replace

Categories

Resources