Highlight cells with past dates - javascript

Hi guys I dont know if this is something that a new programmer should true or not, but heres my problem. I have a table of 13 columns at at present about 400 rows. yes i nkow this is a large table and unfortunatley it will only be getting bigger. what i am trying to achive with this table, somehow, is to have a function that checks the cell contents ( a date dd/mm/yyyy) in the 12th coloumn and if the date has past that it will will add a css to the row.
Through help from some very intelligent programmers i have a code that should work. but i cant get it to work in any way.
Can anyone help me out with this problem.
Thanks.
The code that i have is:
<script language="javascript">
$(document).ready(function() {
function parseDate(dateString)
{
return new Date(Date.parse(dateString));
}
$('#names tr').each(function(index)
{
var row = $(this);
if (parseDate(elem.find("td:eq(1)").text()) < new Date())
row.addClass('row');
});
});
</script>
My table is set out like this:
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>Date</td>
<td>Date</td>
<td>Data</td>
</tr>
ok and this is what i have now:
<html>
<head>
<style>
#sprog tr {
background: #00FF00;
}
#sprog tr.past {
background: #FF0000;
}
</style>
<script src="jquery 1.4.2.js"></script>
<script>
$(function()
{
$('#sprog .date').each(function()
{
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date)
{
$(this).parent('tr').addClass('past');
}
}
);
}
);
</script>
<title>cells</title>
</head>
<body>
<table id="sprog">
<tbody>
<tr>
<td>14/08/2010</td>
<td>20/10/2015</td>
</tr>
<tr>
<td>2</td>
<td class="date">14/10/2010</td>
</tr>
<tr>
<td>3</td>
<td class="date">04/10/2010</td>
</tr>
<tr>
<td>10/12/2010</td>
<td class="date">12/10/2010</td>
</tr>
<tr>
<td>12/10/2010</td>
<td class="date">01/01/1900</td>
</tr>
</tbody>
</table>
</body>
</html>


HTML:
<table id="dates_table">
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>Bob</td>
<td class="date">01/02/2003</td>
</tr>
<tr>
<td>Johnny</td>
<td class="date">03/02/1980</td>
</tr>
<tr>
<td>Ted</td>
<td class="date">14/12/2010</td>
</tr>
<tr>
<td>Jane</td>
<td class="date">08/08/2005</td>
</tr>
</table>​
CSS:
#dates_table tr {
background: #00FF00;
}
#dates_table tr.past {
background: #FF0000;
}​
JavaScript:
$(function()
{
$('#dates_table .date').each(function()
{
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date)
{
$(this).parent('tr').addClass('past');
}
}
);
}
);​
Note I've added a class="date" to the date <td>s so position won't make a difference.
Live demo here: http://jsfiddle.net/LPjfS/2/


Pure javascript should work:
var theTable = $('yourTable').tBodies[0];
for(x=0;x<theTable.rows.length;x++) {
if(theTable.rows[x].cells[11]=='foo') {
theTable.rows[x].cells[11].style.whatever= 'bar';
}
}
Code is untested - sorry - but should be pretty good.
A good explanation: http://www.howtocreate.co.uk/tutorials/javascript/domtables


Ok so after some digging i found that i wasn't calling the jquery correctly and i should actually look like this:
<html>
<head>
<title>trial cell highlight</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body {
background-color: transparent;
padding: 10px;
}
#demotable1 tr {
background: white;
}
#demotable1 tr.past {
background: #FF0000;
color: #999999;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function()
{
$('#demotable1 .date').each(function()
{
var cell_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(cell_date < now_date)
{
$(this).parent('tr').addClass('past')
}
}
);
}
);
//]]>
</script>
</head>
<body>
<table id="demotable1">
<tbody>
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>Bob</td>
<td class="date">01/02/2003</td>
</tr>
<tr>
<td>Johnny</td>
<td class="date">03/02/1980</td>
</tr>
<tr>
<td>Ted</td>
<td class="date">14/12/2010</td>
</tr>
<tr>
<td>Jane</td>
<td class="date">08/08/2005</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks to every one who helped me out with this one.

Related

How can you target a child element of an iterated object in JavaScript?

In this instance I simply want to target tables that have a thead tag.
I trying to concatenate or search using JavaScript or jQuery whichever is quicker.
e.g thead = DT[i].children('thead');
function go() {
var i = 0,
DT = document.getElementsByClassName('DT');
for (i; i < DT.length; ++i) {
var x = DT[i];
if ($(x + ' thead').length) {
//do stuff to this table
}
}
}
<table class="DT" id="gv1">
<tbody>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</tbody>
</table>
<table class="DT" id="gv2">
<thead>
<tr>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td>td</td>
</tr>
</tbody>
</table>

You don't need any loops, you can use jQuery's :has() selector to retrieve an element based on whether or not it contains a specified child, like this:
function go() {
$('.DT').has('thead').addClass('foo');
}
go();
.foo { border: 1px solid #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="DT" id="gv1">
<tbody>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</tbody>
</table>
<table class="DT" id="gv2">
<thead>
<tr>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td>td</td>
</tr>
</tbody>
</table>

You can use querySelector to check if the nested thead exists.
if (x.querySelector("thead")) {
//do stuff to this table
}
Just so you know, you'd do this to accomplish what you were trying originally:
if ($(x).find("thead").length) {
//do stuff to this table
}
This is just to show how you can perform DOM selection from a given context.

show the column of the table in a color if the value in a cell is passed javascript

I have a table for some calculations and if cell value is passed I want to show that column of the table in a color.
I have this for the moment :
<script type="text/javascript">
$(document).ready(function(){
$('#myTable td.y_n').each(function(){
if ($(this).text() < 0.4) {
$(this).css('background-color','#a9edb8');
}
else {
$(this).css('background-color','#eda9ca');
}
});
});
</script>
but this is only for the cell.
Any idea? thanks!

If I understand your goal correctly, you want to set the background color of an entire column if one if the y_n cells contains a numeric value and choose the color based on that value.
To set the entire column, you could get the tablecells at the corresponding indices, but easier is to use a column group:
$(document).ready(function(){
var cols = $('#myTable col'); //get the column groups
$('#myTable td.y_n').each(function(){
var text = this.innerText; //text of the td
if(text.length > 0 && !isNaN(this.innerText)){ //check if it's a number
var ind = $(this).index(); //the index of the td inside its tr = the column index
$(cols[ind]).css('background-color', parseFloat(text) < 0.4 ? '#a9edb8' : '#eda9ca'); //set the col of the column group
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tr>
<td>r1</td>
<td class='y_n'></td>
<td class='y_n'>.7</td>
</tr>
<tr>
<td>r2</td>
<td class='y_n'>.1</td>
<td class='y_n'>.6</td>
</tr>
<tr>
<td>r3</td>
<td>a</td>
<td>b</td>
</tr>
</table>

$(document).ready(function() {
$('#myTable td.y_n').each(function(i,v) {
if (parseFloat($(this).text()) < 0.4) {
$(this).closest("table").find("td").eq(i).addClass("pass");
} else {
$(this).closest("table").find("td").eq(i).addClass("fail");
}
});
});
.pass {
background-color: #a9edb8
}
.fail {
background-color: #eda9ca
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td class='y_n'>
.3
</td>
<td class='y_n'>
.6
</td>
</tr>
<tr>
<td class='y_n'>
.2
</td>
<td class='y_n'>
.9
</td>
</tr>
<tr>
<td class='y_n'>
.9
</td>
<td class='y_n'>
.1
</td>
</tr>
</table>
Use parseFloat() then compare

You can also achieve like this. in each i is index and e will be current element. And i just added with="100" to table so its looks proper.
$(document).ready(function() {
$('#myTable td.y_n').each(function(i,e) {
if ($(e).text() < 0.4) {
$(e).css('background-color','#a9edb8');
} else {
$(e).css('background-color','#eda9ca');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" width="100">
<tr>
<td class='y_n'>
.3
</td>
</tr>
<tr>
<td class='y_n'>
.6
</td>
</tr>
</table>

I am not saying this is the best way because i have use so many loops, but you can achieve your requirement by this code.
$(document).ready(function() {
$('#myTable tr').each(function(index,event) {
$(event).children('td').each(function(indexI,eventI) {
if ($(eventI).text() < 0.4) {
$('#myTable tr').each(function(indexIn,eventIn) {
$(eventIn).children('td').eq(indexI).css('background- color','#eda9ca');
});
}
});
});
});
Best of luck :)

If there are many rows (a lot of them) in your table, you might be better of using colgroups with col structure in your table, and put the background on the col-element. Anyway, you can always do this:
$(function() {
$('table a').click(function(e) {
e.preventDefault();
var index = $(this).html();
colHighlight($(this).closest('table'), index);
});
});
function colHighlight(table, colIndex) {
var bodyCells = table.find('tbody td');
bodyCells.css('background-color', 'transparent');
bodyCells.filter(':nth-child(' + colIndex + ')').css({
'background-color': 'yellow'
});
}
table, td, th {
border: 1px solid #000;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">
Highlight column:
1
2
3
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>

jQuery highlight row within specific time

I am trying to highlight a row, when it's within a specific time range.
So actually let's say its 10:00:00 and i need to mark the row, if the time is between the start end the enddate-row.
the table:
<table class="table table-striped" id="timeTable">
<thead>
<th>Title</th>
<th>Start</th>
<th>End</th>
<th>Channel</th>
</thead>
<tbody>
<tr>
<td>Title 1</td>
<td class="dateRowStart">2016-08-10 09:00:00+02</td>
<td class="dateRowEnd">2016-08-10 11:00:00+02</td>
<td>Channel 1</td>
</tr>
<tr>
<td>Title 2</td>
<td class="dateRowStart">2016-08-10 09:30:00+02</td>
<td class="dateRowEnd">2016-08-10 12:00:00+02</td>
<td>Channel 3</td>
</tr>
<tr>
<td>Title 4</td>
<td class="dateRowStart">2016-08-10 13:00:00+02</td>
<td class="dateRowEnd">2016-08-10 15:00:00+02</td>
<td>Channel 4</td>
</tr>
</tbody>
</table>
The dateformat is the output of my postgresql db. It would be great if I could show them in our local time format (10.08.2016 - 14:15:12) but thats not my main issue here.
my (only half complete) js code to highlight:
<script>
$('#timeTable .dateRowStart').each(function () {
var dtTd = new Date($(this).html());
var dtNew = new Date();
if (dtNew.getTime() < dtTd.getTime()) {
$(this).parent('tr').addClass('highlight');
}
});
</script>
I don't know how to include dateRowEnd to check, if the date is still between the start/end-time. If I'm using two identical time/dates with dateformat eg. "08/10/2016 10:05:00", I'm only getting one row marked., that's the other annoying thing.
Thank you!

You could add a class to the <tr> tags themselves and then do:
HTML:
<tbody>
<tr class="dateRow">
<td>Title 1</td>
<td class="dateRowStart">2016-08-10 09:00:00+02</td>
<td class="dateRowEnd">2016-08-10 11:00:00+02</td>
<td>Channel 1</td>
</tr>
...
</tbody>
jQuery:
$('#timeTable').find('.dateRow').each(function () {
var dtStart = new Date($(this).find(".dateRowStart").text());
var dtEnd = new Date($(this).find(".dateRowEnd").text());
var dtNew = new Date();
if (dtNew >= dtStart && dtNew <= dtEnd) {
$(this).addClass('highlight');
}
});
Note you only have to use .getTime() if you're doing ==, !=, ===, and !== on Date objects as seen here.
Edit: As #MarkSchultheiss suggested, separating $('#timeTable .dateRow') into $('#timeTable').find('.dateRow') has a slight efficiency boost.

With moment.js you can do --
$('#timeTable .dateRow').each(function () {
var startTime = $(this).closest("tr").find(".dateRowStart") .text();
var endTime = $(this).closest("tr").find(".dateRowEnd").text();
if (moment().isBetween(startTime, endTime)) {
$(this).addClass('highlight');
}
});
codepen -- http://codepen.io/anon/pen/OXAEAv
You can also change the date format with moment('orig date').format('MM/DD/YY HH:mm:ss')

Check this snippet:
$(function() {
$('#timeTable .dateRowStart').each(function() {
var dtTdStart = new Date($(this).text());
var dtTdEnd = new Date($($(this).siblings('.dateRowEnd')).text());
var dtNew = new Date();
if (dtNew > dtTdStart && dtNew < dtTdEnd) {
$(this).parent('tr').addClass('highlight');
}
else{
$(this).parent('tr').removeClass('highlight');
}
});
});
.highlight {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="timeTable">
<thead>
<th>Title</th>
<th>Start</th>
<th>End</th>
<th>Channel</th>
</thead>
<tbody>
<tr>
<td>Title 1</td>
<td class="dateRowStart">2016-08-11 17:00:00+02</td>
<td class="dateRowEnd">2016-08-11 19:00:00+02</td>
<td>Channel 1</td>
</tr>
<tr class="highlight">
<td>Title 2</td>
<td class="dateRowStart">2016-08-11 17:30:00+02</td>
<td class="dateRowEnd">2016-08-11 18:00:00+02</td>
<td>Channel 3</td>
</tr>
<tr>
<td>Title 4</td>
<td class="dateRowStart">2016-08-11 13:00:00+02</td>
<td class="dateRowEnd">2016-08-11 15:00:00+02</td>
<td>Channel 4</td>
</tr>
</tbody>

Loop HTML table and add the identical items and its calculated amount to another table

<html>
<body>
<div>
<table border="1" id="topTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="topTableBody">
<tr>
<td>Apples</td>
<td>50</td>
</tr>
<tr>
<td>Apples</td>
<td>25</td>
</tr>
<tr>
<td>Oranges</td>
<td>30</td>
</tr>
<tr>
<td>Strawberry</td>
<td>60</td>
</tr>
<tr>
<td>Cherry</td>
<td>10</td>
</tr>
<tr>
<td>Guava</td>
<td>5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<button id="btn">Click</button>
</br>
<div>
<table border="1" id="bottomTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="bottomTableBody">
</tbody>
</table>
</div>
</body>
</html>
When I press on the button I want it to loop through the top table and get the item names that're alike and add them in one row with the sold amount combined in the bottom table ex: apples will have their own row with a sold amount of 75 and others who have no names that're alike will have their own row such as Oranges with the sold amount also.

If you can use JQuery.
(JSFiddle: http://jsfiddle.net/inanda/o9axgkaz/):
jQuery('#btn').on('click', function() {
var sumMap = {};
//Iterate through table rows
$("table tbody tr").each(function () {
if (sumMap[$(this).children('td:nth-child(1)').text()]) {
sumMap[$(this).children('td:nth-child(1)').text()] = sumMap[$(this).children('td:nth-child(1)').text()] +Number($(this).children('td:nth-child(2)').text());
} else {
sumMap[$(this).children('td:nth-child(1)').text()] = Number($(this).children('td:nth-child(2)').text());
}
})
//Append result to the other table
$.each(sumMap, function (i, val) {
$('#bottomTable tr:last').after('<tr><td>'+i+'</td><td>'+val+'</td>');
});
});
Pure javascript:
(JSFiddle: http://jsfiddle.net/inanda/2dmwudfj/ ):
appendResultToBottomTable= function() {
var sumMap = calculate();
appendResultToTable('bottomTableBody', sumMap);
}
function calculate() {
var table = document.getElementById("topTableBody");
var map = {};
for (var i = 0, row; row = table.rows[i]; i++) {
var itemType=(row.cells[0].innerText || row.cells[0].textContent);
var value=(row.cells[1].innerText || row.cells[1].textContent);
if (map[itemType]) {
map[itemType] = map[itemType] +Number(value);
} else {
map[itemType] = Number(value);
}
}
return map;
}
function appendResultToTable(tableId, sumMap){
var table = document.getElementById(tableId);
for (var item in sumMap){
var row = table.insertRow(table.rows.length);
var cellItem = row.insertCell(0);
var cellValue = row.insertCell(1);
cellItem.appendChild(document.createTextNode(item));
cellValue.appendChild(document.createTextNode(sumMap[item]));
}
}

If it is applicable for your project to use external libraries, you can do it with code like below:
alasql('SELECT Item,SUM(CONVERT(INT,Sold)) AS Sold \
INTO HTML("#res",{headers:true}) \
FROM HTML("#topTable",{headers:true}) \
GROUP BY Item');
Here:
SELECT Item, SUM(Sold) FROM data GROUP BY Item is a regular SQL expression to group and sum data from the table
CONVERT(INT,Sold) conversion procedure from string to INT type
FROM HTML() and INTO HTML() special functions to read/write data from/to HTML table, {headers:true} is a parameter to use headers
I added some minor CSS code (for table and cells borders), because Alasql generates the "plain" HTML table.
See the working snippet below.
(Disclaimer: I am an author of Alasql library)
function run() {
alasql('SELECT Item,SUM(CONVERT(INT,Sold)) AS Sold INTO HTML("#res",{headers:true}) FROM HTML("#topTable",{headers:true}) GROUP BY Item');
}
#res table {
border:1px solid black;
}
#res table td, th{
border:1px solid black;
}
<script src="http://alasql.org/console/alasql.min.js"> </script>
<div>
<table border="1" id="topTable">
<thead>
<th>Item</th>
<th>Sold</th>
</thead>
<tbody id="topTableBody">
<tr>
<td>Apples</td>
<td>50</td>
</tr>
<tr>
<td>Apples</td>
<td>25</td>
</tr>
<tr>
<td>Oranges</td>
<td>30</td>
</tr>
<tr>
<td>Strawberry</td>
<td>60</td>
</tr>
<tr>
<td>Cherry</td>
<td>10</td>
</tr>
<tr>
<td>Guava</td>
<td>5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<button id="btn" onclick="run()">Click</button>
</br>
<div id="res"></div>

What is a good solution for cross browser javascript redirect with history?

I am currently fighting Google Chrome on the following action:
location.href = url
location.replace(url)
document.location = url
window.navigate(url) // doesn't work in Chrome/Firefox
location.assign(url)
window.open(url, '_self')
window.location.href = url
I have tried all, and neither will add a history entry. Is there a way in Google Chrome to do a javascript redirect WITH history?
Thanks.
Explanation
We have a table of items, when clicking on the row, I want the page to navigate to a specified URL, if anyone has a good solution to this other than using the onclick=send method we are using now, please let me know.
Update
It appears that Stackoverflow its-self has this exact same issue. In the main view, click on one of the first 3 columns in the question list (# answers, etc..), then click the back button, it will take you back 2 pages.

Although, I first must say that this is Chrome behaving stupid, and you probably should not worry about it. Try to create a dummy form and with a GET method and programmatically submit it...
<form id="dummyForm" method="GET" action="#">
<input type="hidden" name="test" value="test" />
</form>
Then your onclick...
var frm = document.forms["dummyForm"];
frm.action = url;
frm.submit();

all javascript solution based on #Josh Stodola answer
function goTo(url, data){
var ele_form = document.createElement("FORM");
ele_form.method = "POST";
ele_form.id = 'dummy_form';
ele_form.action = url;
if (!!data){
for(key in data){
var dummy_ele = document.createElement('INPUT');
dummy_ele.name = key;
dummy_ele.value = data[key];
dummy_ele.type = 'hidden';
ele_form.appendChild(dummy_ele);
}
}
document.getElementsByTagName('body')[0].append(ele_form);
document.getElementById('dummy_form').submit();
}

I know this is an older question, but if you're navigating to a link on the same page, you should be able to simply do the following, where 123 is the item id:
window.location = "items/123";

What you could do using jQuery is something like:
$("table tbody td").wrapInner('');
Since I don't know the structure of your markup it's difficult to provide a more specific fix.
See the jQuery documentation on wrapInner.

What about "clicking" a link with JS?
blah blah
<script type="text/javascript">
$(document).ready(function() {
$('#clickme').click();
});
</script>
I'm not sure if this work, but it should mimic a user clicking the link.

Taking what Josh Stodola recommended, and doing it with jquery instead, I have created a method that seems to get around this Chrome issue without a lot of overhead in the markup.
Here is a fully working version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Row Navigation with History</title>
<style type="text/css">
body {
font: 14px Georgia, serif;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
table {
border-collapse:collapse;
width:100%;
}
thead {
text-align:left;
font: 16px serif;
}
tbody {
font: 14px Georgia, serif;
}
tr {
cursor:pointer;
}
td {
border: 1px solid #ccc;
padding:10px;
}
.slim {
width:88px;
}
.wide {
width:300px;
}
.hover {
background-color:#eee;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function() {
$("td").hover(function() {
$(this).parent().addClass("hover");
}, function() {
$(this).parent().removeClass("hover");
});
$("tr").click(function() {
if (navigator.userAgent.toString().indexOf("Chrome/2") != -1)
{
var form = $("<form></form>");
form.attr("method", "get");
form.attr("action", $(this).attr("rel"));
form.submit();
} else {
location.href = $(this).attr("rel");
}
});
});
</script>
</head>
<body>
<div id="page-wrap">
<table>
<colgroup />
<colgroup class="wide" />
<colgroup class="slim" />
<colgroup class="slim" />
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr rel="http://stackoverflow.com/questions/1173912/what-is-a-good-solution-for-cross-browser-javascript-redirect-with-history">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
<tr rel="http://www.stackoverflow.com">
<td>Title</td>
<td>Description</td>
<td>1/1/2009</td>
<td>Available</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

chrome is not supported location.reload. Use window.open(url, '_self') for page redirect

Here is a nice functional and clean jQuery solution based on Josh Stodola's (which didn't work for me).
function redirect(url, data) {
var form = $('<form method="get"></form>');
form.attr("action", url);
for (key in data){
var input = $('<input type="hidden"/>');
input.attr("name", key);
input.attr("value", data[key]);
form.append(input);
}
$("body").append(form);
$(form)[0].submit();
}

Categories

Resources