Menu
I just want to double click on a table row, fetch id and redirect to another page.
All examples I have seen are using JQuery, but how do I do this using Vanilla?
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>getElementsByTagName example</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
h1 {
font-size:1.25em;
}
tr {
cursor: pointer;
}
</style>
</head>
<body>
<h1>getElementsByTagName example</h1>
<table id="table">
<tbody>
<tr>
<td>1</td>
<td>BMW</td>
</tr>
<tr>
<td>2</td>
<td>VW</td>
</tr>
<tr>
<td>3</td>
<td>Mercedes</td>
</tr>
</tbody>
</table>
<script>
( function( w, d ) {
var c, row = d.getElementsByTagName( 'tr' ),
urls = [ 'https://www.bmw.com',
'https://www.vw.com',
'https://www.mercedes-benz.com'
];
for ( c = 0; c < row.length; c ++ ) {
row[ c ].addEventListener( 'dbclick', goto( c ), false );
}
function goto( c ) {
row[ c ].ondblclick = function() {
w.location = urls[ c ];
}
}
} ( window, document ) );
</script>
</body>
</html><i>
</i>
``
>@coothead#1617406 here is an example
>[color=navy]**ForEach**
forEach is an Array method that we can use to execute
a function on each element in an array.
[size=18]**It can only be used on Arrays, Maps, and Sets**[/size] .[/color]
<i>
</i>( function( w, d ) {
var c, row = d.getElementsByTagName( 'tr' ),
urls = [ 'https://www.bmw.com',
'https://www.vw.com',
'https://www.mercedes-benz.com'
];
<br/>
for ( c = 0; c < row.length; c ++ ) {
row[ c ].addEventListener( 'dblclick', goto( c ), false );
}
function goto( c ) {
return function() {
w.location = urls[ c ];
}
}
} ( window, document ) );
<i>
</i>(function(w, d) {
var url = '#/topics?';
// var rows = Array.from(d.getElementsByTagName('tr'));
var rows = d.querySelectorAll('#table tr');
rows.forEach(function(row, idx) {
row.addEventListener('dblclick', goto.bind(row, idx), false);
});
function goto(idx) {
w.location = url + idx;
};
}(window, document));
>@Kever#1617418 Below another version using forEach and bind instead of a closure.
<i>
</i> var url = '/topics?';
...
function goto(idx) {
w.location = url + (idx + 1);
};
<i>
</i> var url = ['https://www.bmw.com',
'https://www.vw.com',
'https://www.mercedes-benz.com'
];
...
function goto(idx) {
w.location = url[idx];
};
>@Kever#1617431 You might have to add 1 to the index, because rowIndex is 0-based.
A Row ID can be a mix of numbers and characters. It has no relation to the "table row ID". And It always points to the same final "card no". So I have to find the stored id (hidden or visible) in this table row[/quote]For such task I recommend using a data attribute like this:
<table id="table">
<tbody>
<tr data-record-id="ABC88">
<td>1</td>
<td>BMW</td>
</tr>
<tr data-record-id="1412">
<td>2</td>
<td>VW</td>
</tr>
<tr data-record-id="XY666">
<td>3</td>
<td>Mercedes</td>
</tr>
</tbody>
</table>
<script>
const rows = document.querySelectorAll('#table tr'),
url = 'topics/';
rows.forEach((item, idx) => {
item.addEventListener('dblclick', event => {
console.log(url + item.dataset.recordId);
// window.location.href = url + item.dataset.recordId;
});
});
</script>
>@Sempervivum#1617433 For such task I recommend using a data attribute like this:
``<i>
</i> var rows = document.querySelectorAll('#table tr');
var url = 'topics/';
rows.forEach((item, idx) => {
item.addEventListener('dblclick', event => {
alert(url+item.dataset.id)
});
});<i>
</i>
``
``<i>
</i>var rows = document.querySelectorAll('#table tr');
var url = 'ctopic?id=';
rows.forEach((item, idx) => {
item.addEventListener('dblclick', event => {
window.location.href = (url + item.dataset.id)
});
});<i>
</i>
`</CODE>
The <STRONG>**ctopic?id=**</STRONG> makes it simpler to fetch the value in Go.
<C>
val := r.URL.Query().Get("id")`
Live http://94.237.92.101:3030/mytopics
Thanks for all help!