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()">
Related
how can I import JavaScript document where defined some variables into a html document, so I can output these variables there?
I tried it that way but it didn´t work. I defined the variable title in my other script an gave it the Id title. The name of the file is server.js, so I worte in the html document this as the source but it doesn´t work. The data cell where I want to output it is empty. When I define the variable in the same document it works but not when i do it in the server.js document.
<body>
<script src="server.js"></script>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td> <div id="title"> </td>
</tr>
</table>
</body>
the part from my second script:
let title = $("#productTitle").text().replace(/\s\s+/g, "");
document.getElementById("title").innerHTML= title;
The answer is simple. Just import the javascript file outside of the body tag. You are not getting the desired result because the JavaScript is loading before the remaining body elements and it is not able to find the desired element with id title.
Before putting the script tag just after </body> just open the browser console you will see an error like this: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML').
So the new code should be like
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td> <div id="title"> </td>
</tr>
</table>
</body>
<script src="stack.js"></script>
Data I received from database, Postgresql, is html content for rendering in browser, it is as following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee</title>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>CU0012</td>
<td>David</td>
<td>Jonh</td>
</tr>
untitle Name <!-- content I would like retrieve and manipulate -->
<tr>
<td>CU0010</td>
<td>Siv</td>
<td>Hellen</td>
></tr>
<tr>
<td>CU0009</td>
<td>Merry</td>
<td>Mug</td>
></tr>
</table>
</body>
</html>
Is it possible that I want to be able to get text untitle Name that is in table but outside of tr tag so that I can manipulate it thereafter?
As a mater of fact, after this html script rendered in browser, any content that is not wrap properly in table would be forced to get outside of table, yet before it rendering I would like to keep there by access to it and make it properly wrap into table.
<script>
$(document).ready(function(){
htmlTable = $('table tr').html();
htmlTable.each(function(){
// check element is in tr or not
});
})
</script>
How can I archive that in jQuery? Thanks.
When receive html content by ajax or other method, you can use String.prototype.replace() to remove the unexpected html content or replace with expected content before load it into one html element.
//for example, you receive below text from the server
var serverData = '<table border="1"><tr><td>CU0012</td><td>David</td><td>Jonh</td></tr>untitle name<tr><td>CU0010</td><td>Siv</td><td>Hellen</td></tr></table>';
function loadReviseHtml(){
var reviseData = serverData.replace(/<\/tr>\s*(.+)\s*<tr>/, '</tr><tr><td style="background-color:red">$1</td></tr><tr>');
console.log(reviseData)
document.getElementById('htmlcontainer1').innerHTML = reviseData;
}
function loadOrgHtml(){
document.getElementById('htmlcontainer1').innerHTML = serverData;
}
<a onclick="loadReviseHtml()" style="background-color:green;">Click me to load revised html!</a>
<div id="htmlcontainer1" style="background-color:gray;">
No Data!
</div>
<a onclick="loadOrgHtml()" style="background-color:red;">Click me to load org html!</a>
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.
I have a .hta File containing JavaScript and HTML. My JavaScript Code modifies the HTML with functions like "appendChild", but the HTML does not get updated afterwards; Even if the element was corretly appended in the DOM-Structure (I can alert the .innerHTML, returning the html-code like it should be, but it doesn't show in the browser). If put in an HTML-File, it works completely fine.
<!DOCTYPE html>
<html>
<head>
<hta:application id="prjreq_v1" applicationname="ProjectRequirements">
<script>
function appendDiv(){
//Get the element that will get appended
var contentElement = document.getElementById("main_table");
//Create table row
var tr = document.createElement("tr");
tr.id = 0;
//Create table column
var td_0 = document.createElement("td");
td_0.id = "date";
td_0.innerText = "22/22/2222";
//Append
tr.appendChild(td_0);
contentElement.appendChild(tr);
//Alert outputs the modified HTML, but it doesn't show...
alert(contentElement.innerHTML);
}
</script>
</head>
<body>
<div id="content">
<table id="main_table">
<tr>
<th id="date">Date</th>
<th id="source">Source</th>
<th id="requirement">Description</th>
</tr>
<tr id="100">
<td id="date">dd/MM/yyyy</td>
<td id="source">Example1 Source</td>
<td id="requirement">Lorem Ipsum dolores est</td>
</tr>
</table>
</div>
<script>(function (){appendDiv();})();</script>
</body>
</html>
Internet Explorer has always been really picky about adding rows to tables. All browsers, however, assume that your table rows are contained in a <tbody> element, and it's valid for a table to have multiple <tbody> elements. (You can't see them on the screen; it's just a structural thing.)
Thus if you wrap your <tr> in a <tbody> and then append that to the <table>, it should work.
(I don't have IE readily available, but it might work if you were to explicitly include the <tbody> or else find the implicitly included one, and then target that with the .appendChild() call.)
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
}
});
}
}