I have a table with rows, that when clicked, take the user to a page with more detailed information about the item that row was describing. Unfortunately, it always changes the current page, and our users would like to be able to middle-mouse/control click the rows in order to open a new tab if they want to. This choice is available with normal links, but not with my onclick it seems. An example is shown below:
<html>
<body>
<table border='1'>
<tr onclick='window.open("http://www.google.com")'>
<td>Open Another Window</td>
</tr>
<tr onclick='location.href="http://www.google.com"'>
<td>Change Current Page</td>
</tr>
</table>
</body>
</html>
What is the best way to simulate a normal link with an onclick event so the behaviour will be the same across different os/browsers, which I believe have different bindings for what triggers opening a link in a new tab.
This works for me:
<tr onclick="window.open('http://www.google.com','_blank')">
I just stumbled across this question because I was also looking for a solution. Here is a possible solution. It opens the page normally when clicked normally and in a new tab if the middle button is used.
You can add a table class (like clickable-rows) to easily apply this behavior to your tables. Then add a data attribute (like data-href) with the link.
<!DOCTYPE html>
<html>
<body>
<table>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 1</td>
</tr>
<tr data-href="http://www.google.com">
<td>Non clickable row</td>
</tr>
<tr class="clickable-row" data-href="http://www.google.com">
<td>Clickable row 2</td>
</tr>
</table>
<script>
// loop through the table rows with the clickable-row class, and turn them into clickable rows by
// setting the cursor to a pointer, and adding a mousedown listener to open in the current page
// if left-clicked, or open in a new tab if middle-clicked
let rows = document.querySelectorAll("tr.clickable-row");
rows.forEach((clickableRow) => {
clickableRow.style.cursor = "pointer";
clickableRow.addEventListener("mousedown", function(e) {
e.preventDefault();
var href = this.getAttribute('data-href');
if (e.button === 1)
{
window.open(href, "_blank");
}
else if (e.button === 0)
{
window.location = href;
}
})
});
</script>
</body>
</html>
Instead of handling the click event of the table row, use an anchor tag. The default behaviour for Ctrl+click for anchors is to open the URL in the href attribute in a new window or tab. If you want a new tab or window opened without the Ctrl button, you can use the target attribute of the anchor as well.
<td>open another window or tab</td>
<tr onclick="window.open('./putyourlink.php')"> it's still work to me also but pls put '_blank' like another answer it's good more </tr>
Related
I'm using AngularJS with ngtable.
Every time when I'm creating a table I put ui-sref on <tr> element like this:
<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
<td>{{element.name}}</td>
<td>{{element.info}}</td>
</tr>
However, this doesn't allow the user to open entry in a new tab, right-click on it to open in a new window, etc (it doesn't act like <a> )
Is there any way that I could make the whole row clickable with the option to open in new tab/window (like in the case)
You can do it using a function, $state.href and window.open.
Also use a variable to control whether new tab or not:
// <tr ng-repeat="element in $data" ng-click="navigateTo(element.id, false)"> -- Same Tab
<tr ng-repeat="element in $data" ng-click="navigateTo(element.id, true)">
<td>{{element.name}}</td>
<td>{{element.info}}</td>
</tr>
...
//In the controller
$scope.navigateTo = function(id, inNewTab){
if(inNewTab){ // New tab
var url = $state.href('app.some.details.info', {id: id});
window.open(url , "_blank")
} else { // Same tab
$state.go('app.some.details.info', {id: id});
}
}
Yo ! If you want your row content acting like an <a /> element, maybe you can wrap your <td> content with an anchor. Something like this:
<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
<td>
{{element.name}}
</td>
<td>
{{element.info}}
</td>
</tr>
You can also create some custom javascript that will recreate <a /> behaviour. Create click listener for each table row and use window.location.href = ....
I have 2 add button. First add button on header, click this button will add 1 new row. Second add button in table (such as image on my post), click this button will add new row such as image my post. I want add row in table such as below image, but i haven't thought of a solution yet. Hope to be got your helps!
View Image Here
The insertRow() method allows you to add rows to a <table> and returns a reference to a new row. Adding that to an onClick() function should be easy! :)
Here's the relevant information on Mozilla's site .
To solve this, you have to add a new table inside td, like this
function addNewRow() {
let table = document.getElementById("add");
table.innerHTML += '<table><tr><td><b>This is a test</b></td></tr></table>';
}
<html>
<body>
<button onclick="addNewRow()">Add</button>
<table id='my-table'>
<tr>
<td>This is one td</td>
<td id='add'>This is another td</td>
</tr>
</table>
</body>
</html>
I have a table with the following structure
<table id='table1'>
<tbody>
<tr id='rowa'>
<td><select>....</select></td>
<tr>
...
<tr id='rowx'>
<td>....</td>
</tr>
...
<tr id='rowz'>
</tr>
</tbody>
</table>
What I want to do is on clicking of a button, I want to copy the rowa and insert it before rowx.
What I am currently doing is
<script type='text/javascript'>
function copyRow() {
var row = $('#rowa').clone();
$('#rowx').before(row);
}
</script>
It seems to show the newly constructed row before the rowx but when I try to access that new row, it does not work. what I mean by does not work in that the select input item does not behave like a select item, it behaves like the static text.
elsewhere on the page I have
<a href='javascript:copyRow()'><img src='images/copyrow.png' title='Copy Row' /></a>
Sorry! I should have made it clear that the copyRow is being called when the user clicks on a link somewhere else on the page.
Check this http://jsbin.com/owivin/1/.
JS:
$(document).ready(function(){
$("#rowx").before($("#rowa").clone());
});
Your code's not working because you never call copyRow(). I put it in the document.ready() so that it would run as the document gets ready!
I am using Wordpress and have a simple HTML table in a post. I use javascript to make all of the row clickable to a URL. Some clients report an error using Internet Explorer, 'This content cannot be displayed in a frame'. I need 2 things:
The link to open in a new tab (it currently opens in the same window)
To remove this error (even the content below gives the error).
Any ideas? Thanks in advance
<table class="mytable">
<tbody>
<tr>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>ISBN</th>
</tr>
<tr onclick="document.location = 'http://amazon.com/dp/1234567890';">
<td><strong><em>Book A</em></strong></td>
<td>rrr</td>
<td>hhh</td>
<td>123414</td>
</tr>
<tr class="alt" onclick="document.location = 'http://amazon.com/s?index=books&field-author=fred';">
<td><strong><em>Book B</em></strong></td>
<td>VVV</td>
<td>AAA</td>
<td>n/a</td>
</tr>
</tbody>
</table>
It would be possible to do this using anchors, however it would require one for each column in each row and I guess your not up for that!
I cant seem to replicate the error you're getting, I guess your using a different version of IE to me.
Using the TR onclick event does seem to be the easiest method.
As you want the link to open in a new window or tab (its not really in your control as it depends on how the clients browser is configured) you can use window.open() instead of changing window.location like you are currently.
<script type="text/javascript">
function navigate(url) {
window.open(url);
}
</script>
Add something along those lines to the head of your page.
<tr onclick="navigate('where.you/want-to-go');">
And you'll be able to use it like that. I don't know if this will trigger any pop-up blocker type things but for my tests it opened a new tab.
The window.open function can take some extra arguments to try to force new tabs or windows etc but don't know how many browsers what and how well it works.
Does anyone know whether i can pass a table from a page to another pop-up page when the button been clicked?
Example:
In page A, I have the following code :
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Alan</td>
<td>12</td>
</tr>
<tr>
<td>Amy</td>
<td>13</td>
</tr>
</table>
when I clicked on the following javascript, new page will pop-up and it will passing the same table and information over:
window.open("pgTest.aspx");
Do anyone know whether it's possible happen in jquery, javasctip or ajax?
You can call a function in the parent window using opener.functionName and in that you can access the table in the parent window.
For more details read window.opener
In your parent (opener) window
<table id="table1">
....
</table>
function getTable() {
var tableObj = document.getElementById("table1");
return tableObj;
}
In your child window
opener.getTable();
When you open a new window, you can write whatever you want as its content, so you can do:
myNewWindow.document.write('<html><title></title>' + someElement.innerHTML + '</html>');
myNewWindow.document.close();