need help with arrays and links in javascript - javascript

Hi i have a question regarding html and javascript.
Say that i click on a link on a html site say
<tr>
<td>www.hello1.com</td>
</tr>
then I also want to see if there are any other related link on that site with a narrow name, for example
<tr>
<td>www.hello2.com</td>
</tr>
So what I want to do is construct a javascript method that everytime you click on a link
you run this method and check what link that has been pressed, and then also search the entire html site for a similar link (here its very simple, the site only consist of a table containing links, so there will not be so much to search trough).
How is this done?
I only need the method, I know how to run the method everytime you press a link :)
Thanks in advance :)
Edit
With "similar" i mean something like this
'\\b'+theUrlToGoTo+'\\b'
In other words the only thing that will change is a number after the name for example
hello1 and hello2
Edit 2
Thanks to nemophrost I now know how to do the first one. I now have a second question, before Im done, thats regarding generating html code with javascript.
Now say that I have an array after I have run the everyClickFunc() func that includes
var myArray = [ 'www.hello1.com', 'www.hello2.com', 'www.hello3.com'];
I would now like to generate a simple html page like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
And this file is to be overwritten each time I click on a link. So the links will be diffrent depending on what links i click on, on the original site.
In other words I want something like this
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.testing1.com</td>
</tr>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.testing2.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
<tr>
<td>www.diffrent1.com</td>
</tr>
<tr>
<td>www.diffrent2.com</td>
</tr>
</table>
</html>
To generate a new html site that contains the following information if you click on any of the above "hello" links
<html>
<head>
</head>
<body>
<table>
<tr>
<td>www.hello1.com</td>
</tr>
<tr>
<td>www.hello2.com</td>
</tr>
<tr>
<td>www.hello3.com</td>
</tr>
</table>
</html>
How is this easiest solved?
Again thanks you so much in advance :)

With jQuery you could do something like this:
function everyClickFunc(urlToMatch) { // pass in something like 'www.hello1.com'
var baseURLMatch = urlToMatch.match(/^www\.(.+\D)\d*\.com$/);
if (baseURLMatch && baseURLMatch.length > 1) {
var matchExp = new RegExp('^www\\.' + baseURLMatch[1] + '\\d*\\.com$');
$('a').each(function() {
if ($(this).attr('href').match(matchExp)) {
doSomethingBecauseYouGotAMatch(); // Call your successful match function
}
});
}
}

Related

Using JavaScript variables in a Thymeleaf th:each

I am trying to build a table using th:each and have the whole row of the table clickable as a link through JavaScript.
<table>
<th:block th:each='user : ${list}'>
<script th:inline="javascript">
var userid = [[${user.id}]];
</script>
<tr onclick="location.href='user?id='+userid">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</th:block>
</table>
However, the variable always refers to the latest value and not the one it was when the row was created. Is there a way to do that? Or maybe a different solution to what I'm trying to do?
No need for the th:block, you can simply put the th:each on the tr.
To accomplish the click, I recommend putting the id in a data attribute, and retrieving it in JavaScript. This should work for you:
<table>
<tr th:each="user : ${list}"
th:data-id="${user.id}"
onclick="location.href = 'user?id='+this.getAttribute('data-id')">
<td th:text="${user.firstName}"></td>
<td th:text="${user.lastName}"></td>
</tr>
</table>
You can avoid using JavaScript by adding an <a> element to each table cell (Inspired by https://stackoverflow.com/a/17147909/40064):
<table>
<th:block th:each='user : ${list}'>
<tr>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.firstName}"></a></td>
<td><a th:href="#{/user(id=${userid})}" th:text="${user.lastName}"></a></td>
</tr>
</th:block>
</table>

How to search through a table and pull the data?

I'm new to js, I'm working on a chrome extension and am having confusion webscraping a website. Suppose I have a simple table in an html like this
<html>
<body>
<table class="birthdays">
<tbody><tr>
<th>date</th>
<th>month</th>
<th>year</th>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
</tbody></table>
</body>
</html>
In my chrome extension when I do
const x = document.getElementsByTagName("th")[0][0]
alert(x)
It says it found a th object, but doesn't give me the actual data. That's the first issue, my actual goal is to determine if all elements in the tr tags have the same of one property (ex. if everyone has their birthday in Jan, open a tab).
document.getElementsByTagName
returns HTMLCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
it's an array-like object (not real array)
and you can get the value from it calling item() method https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item
Seems that you need something like this document.getElementsByTagName("th").item(0).innerHTML to get content of the first TH tag
This is not a complete answer, but in javascript the container is not its contents - i.e. you need document.getElementsByTagName("th")[0][0].innerHTML to get at the 'date' string.

Cant sort html table using sorttable.js

Im having trouble trying to sort a dynamically created html table. I create it using jade/pug. I am trying to use the sorttable.js script found here http://www.kryogenix.org/code/browser/sorttable/ . I am still kind of new to html/javascript. So if there is some obvious reason why its not working could someone point it out please?
Here is some of the html code generated from the template
<html>
<head>
<script src="/path/to/sorttable.js"></script>
<style>
th.clickable:hover
{
color:green
}
th, td
{
padding:5px;
}
th.clickable
{
cursor: pointer;
}
</style>
</head>
<body>
<script>
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
</script>
<table class="sortable" id="tbl">
<tr>
<th class="clickable">id</th>
<th class="clickable">value</th>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
</tr>
</table>
</body>
</html>
The goal is to have it so when I click on the header it sorts the table by that column.
Please excuse if this is already known...but
The script tag gets read and executed whenever the browser comes across it. Have you tried putting the script tag after your table?
At the time your code executes:
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
Your table hasn't rendered yet and is unavailable. So you;re passing undefined to the sorttable.makeSortable method. You can test this by adding a trace statement after you get the element:
var newTableObject = document.getElementById(tbl)
console.log(newTableObject)
You should wait to fire this code after your table has rendered. Something like this:
onLoad = function(){
var newTableObject = document.getElementById(tbl)
sorttable.makeSortable(newTableObject)
}
and declare that like so:
// using jQ
$(document).ready( onLoad())
or for plain JS
<body onload="onload()">

Access External webpage HTML table without table ID from Java Script and convert to JSON

I have written a script to get HTML table data to JSON Object.
for this task I have used lightswitch05 jquery plugin.
In this code I can access a HTML table data in same web page in Javascript
using
var table = $('#example-table').tableToJSON();
but I need to access HTML table of external webpage.
Table URL is here - http://ccmcwolf.byethost4.com/index.html
how can I change the it to above "#example-table" to that external web page table ?
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script
src="http://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js">
</script>
<script>
function myFunction() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
}
$(document).ready(myFunction);
</script>
</head>
<body>
<table id='example-table' class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th data-override="Score">Points</th></tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td></tr>
</tbody>
</table>
</body>
</html>
Thank you very much!
Since, JavaScript has scope in the current page only (i.e. it can access and modify the content of the page where it is embedded or declared/linked using the script tag), I don't think there is any direct way of doing it.
But if that external page is on the same domain where your current JavaScript code is operating, you can always get the html by an Ajax call to the server and then run your code to extract the html table in JSON form.
Please, let me know if I am missing something and I will edit my answer based on your input.
Thank you.

Adding individual id tags to table cells with Rails each loop?

In my rails each loop, I have a certain <td> that I want to add an id to, so that when I click the button a javascript method on the page that uses that id will trigger before the linked method will call. It works fine on the first go, but since each entry will have the same id at that cell, all the rest of the buttons dont work.
Instead of using an id use a class instead.
For example:
<html>
<head>
<title>example table site</title>
</head>
<body>
<table>
<tr>
<td class="example">I'm a table cell</td>
<td>I'm a table cell that doesn't have anything happen when you click</td>
</tr>
<tr>
<td class="example">Click Me</td>
<td>Another boring cell</td>
</tr>
</table>
<script>
$(".example").click(function (e) {
console.log('table cell clicked');
});
</script>
</body>
</html>

Categories