Using JavaScript in Greasemonkey, I'm attempting to pull individual cells and read the innerHTML of each cell to search for a given string.
There's a table of 3x3, and I want to search them in the order of the center first, then depending on situation, move to not-necessarily linear progression (i.e. top-left, top, left, top-right, bottom-left, right, bottom, bottom-right).
I've put each of the cells into an array, and using splice(), I assign the cell to a variable. For testing purposes, I throw up 2 alerts with the cell variable itself, then the cell innerHTML.
When I just use the variable, the alert says [object HTMLTableCellElement], but the innerHTML is undefined.
I've created a mock page to show my example. here's the code (Also at jsBin).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4<br>
center
</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<script language="JavaScript">
var tables = document.getElementsByTagName("table");
tables[0].style.border = "thin solid red";
tables[0].id = "grid";
var grid = tables[0];
var cells = new Array();
cells[0] = grid.rows[0].cells[0]; // nw
cells[1] = grid.rows[0].cells[1]; // n
cells[2] = grid.rows[0].cells[2]; // ne
cells[3] = grid.rows[1].cells[0]; // w
cells[4] = grid.rows[1].cells[1]; // c
cells[5] = grid.rows[1].cells[2]; // e
cells[6] = grid.rows[2].cells[0]; // sw
cells[7] = grid.rows[2].cells[1]; // s
cells[8] = grid.rows[2].cells[2]; // se
var grid_string = "";
function HumanCount(cell) {
var human_regex = /Human/;
var humans = cell.innerHTML.split(human_regex);
var humans_length = humans.length - 1;
return humans_length;
}
for (a = 0; a < 9; a++) {
cells[a].count = HumanCount(cells[a]);
grid_string += cells[a].count + " ";
if (a == 2 || a == 5) {
grid_string += "<br>";
}
}
var direction = 0; // nw
var center = cells.splice(4, 1);
alert("center: " + center);
alert("innerHTML: " + center.innerHTML);
</script>
</body>
</html>
center is not an element, so it has no innerHTML property.
center is an array of elements, so if you use:
alert ("innerHTML: " + center[0].innerHTML);
you'll see what you expect.
~~~
That alert alert("center: "+center); is misleading, as it shows <td> the same as [<td>].
For more accurate (and less annoying) debugging don't use alert(). Use console.log, EG: console.log ("center: ", center); -- which would show the array as different from the element and doesn't throw up a modal dialog.
Related
I've read that createDocumentFragment is way more faster than appending elements one by one to the DOM in a for-loop, e.g. see here.
What I want to do:
Create a table column in a document fragment. This column should contain numbers from an array (for example "ratings").
After that I want to replace an existing column with the new one (the "fragment" one). So I can put the whole column to the DOM all at once.
My problem:
I can't really figure out how to replace an existing column if there already is one. Appending on the other hand is no problem.
My JSfiddle: http://jsfiddle.net/LEqG9/2/
Helpful links, here and here
HTML
<table id = "table">
<tr>
<th>Name</th>
<th>Rating</th>
</tr>
<tr>
<td>A.H.Hattray </td>
<td id = "row0"></td>
</tr>
<tr>
<td>Icke_eben </td>
<td id = "row1"></td>
</tr>
<tr>
<td>John_Doe123 </td>
<td id = "row2"></td>
</tr>
</table>
Javascript
var rating = [1, 10, 3];
var fragment = document.createDocumentFragment();
for (var i = 0, len = rating.length; i < len; i++){
var element = document.createElement('tr');
element.innerHTML = rating[i];
fragment.appendChild(element);
}
document.getElementById('table').appendChild(fragment); //I know here should be the code to replace the second column!
The following code demonstrates that it is possible to manipulate an existing table in a DocumentFragment.
var rating = [1, 10, 3];
var theTable = document.getElementById('table');
var frag = document.createDocumentFragment();
frag.appendChild(theTable);
var col2 = frag.querySelectorAll('tr td:nth-of-type(2)');
for (var i=0; i < col2.length; i++) {
col2[i].innerHTML = rating[i];
}
// it is also possible to use insertCell and deleteCell
var theRows = frag.querySelectorAll('tr');
for (var i=0; i < theRows.length; i++) {
var x = theRows[i].insertCell(1);
if (i > 0)
x.innerHTML = 'new one';
else
x.innerHTML = 'The Header';
}
document.body.appendChild(frag);
(Making the new cell in the first row a TH element, rather than TD requires a little more work, using createElement and appendChild or insertBefore.)
If you step through this the table is removed from the DOM when appended to the fragment, then reappears when the fragment is appended to the body.
Columns can't be put into the table all at once (and thus won't work as a fragment) because a column is a bunch of different cells in each of a whole bunch of rows - it's not an entity by itself.
One thing you could do for good performance is to temporarily hide the table with display: none, add all your rows/cells and then show the table again. This should allow the browser to avoid intermediate layout issues every time you add a new cell and you should only get one repaint with the final content.
I am a complete newbie in programming so be easy on me.
I want to print an array object into a table in HTML using getElementByID.
<script>
var ram = ["8GB", "3GB"];
var storage = ["500GB" , "120GB"];
document.getElementById("mac.r").innerHTML = ram[0];
document.getElementById("mac.s").innerHTML = storage[0];
</script>
And I want to print it in a table
<table width="600" border="6" cellpadding="5px">
<tr>
<td> Ram</td>
<td> Storage</td>
</tr>
<tr>
<td id="mac.r"></td>
<td id="mac.s"></td>
</tr>
</table>
I use a macbook and google chrome.
If you must keep your script inline place it at the bottom of your page. See below, you can view the fiddle here
Once the element exists that you need to populate, you then loop the the data you need and fill the related element with your data.
<html>
<body>
<table width="600" border="6" cellpadding="5px">
<tr>
<td> Ram</td>
<td> Storage</td>
</tr>
<tr>
<td id="mac.r"></td>
<td id="mac.s"></td>
</tr>
</table>
<script>
(function() {
var ram = ["8GB", "3GB"];
var storage = ["500GB", "120GB"];
var macR = document.getElementById('mac.r');
var macS = document.getElementById('mac.s');
for(var i = 0; i < ram.length; i++){
if (macR !== null) macR.innerHTML = macR.innerHTML + ram[i] + "<br>";
}
for(var i = 0; i < ram.length; i++){
if (macS !== null) macS.innerHTML = macS.innerHTML + storage[i] + "<br>";
}
})();
</script>
</body>
</html>
One simple approach is to use the array's build-in "forEach" method:
var ram = ["8GB", "3GB"],
storage = ["500GB" , "120GB"];
ram.forEach(function(element, index, array){
document.getElementById("mac.r").innerHTML += element;
});
storage.forEach(function(element, index, array){
document.getElementById("mac.s").innerHTML += element;
});
See it here: http://jsfiddle.net/S3CY4/
Be aware though its mostly supported in modern browsers and it may not be the most performant approach.
I do apologize for the title, I wasn't sure what to call this. Anyways I am currently working on a WYSIWYG site builder and I've run into a little problem.
I created the following code to automatically make a 'div' appear above the selected cell for some buttons to be contained within it. The 'div' needs to disappear when a user clicks on another cell or when the user clicks on another bit of the document, etc. But I've been unable to figure out a good method of getting rid of it, would be lovely to have some help. Thank you, and also if it isn't too much to ask. I've been attempting to figure out a way for the document to automatically detect what table index is selected from where the user has their cursor. That can be seen on line 1.
http://jsfiddle.net/fwZTc/102/
var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td"); //
for(var i = 0; i < cells.length; i++){
// Cell Object
var cell = cells[i];
// Track with onclick
cell.onclick = function(){
var cellIndex = this.cellIndex;
var rowIndex = this.parentNode.rowIndex;
alert("cell: " + cellIndex + " / row: " + rowIndex );
//var div = document.createElement('div');
//div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
//div.style.color = 'red';
// better to use CSS though - just set class
//div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
//document.appendChild(div);
awesome = table.rows[rowIndex].cells[cellIndex];
awesome.innerHTML = '<div style="width:200px; height:20px; position:absolute; margin-top:-20px; background-color:#666">'
}
}
Try this instead.
HTML:
<table>
<tbody id="myTblBody">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
JQuery:
$('#myTblBody tr td').click(function(){
var html = $(this).html();
$('#box').remove();
$(this).html(html + '<div id="box" style="width:50px; height:20px; position:absolute; margin-top:-20px; background-color:#666">');
//If you would like to know row and col number.
var row = $(this).parent().index();
var col = $(this).index();
alert('row ==' + row + "col == "+ col);
});
JSFiddle
I have a dynamic form that is generated based on javascript. Here's the relevant javascript:
function addRowToTable()
{
var tbl = document.getElementById('convention');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('textarea');
el.rows = '2';
el.cols = '80';
el.name = 'conventionSkill' + iteration;
el.size = 40;
var el2 = document.createElement('input');
el2.type = 'hidden';
el2.name = 'conventioni_alt';
el2.value = iteration;
el2.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
cellRight.appendChild(el2);
}
function removeRowFromTable()
{
var tbl = document.getElementById('convention');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
HTML:
<table id="convention">
<tr>
<td><label>Skill Descriptions:</label></td>
</tr>
<tr>
<td>
<textarea name='convention_54' rows='2' cols='80'>
text
</textarea></td>
<td><a href='javascript:void(0)' onclick='removeRowFromTable(54);'><font size=
'+1'>-</font></a></td>
</tr>
<tr>
<td>
<textarea name='convention_55' rows='2' cols='80'>
text2
</textarea></td>
<td><a href='javascript:void(0)' onclick='removeRowFromTable(55);'><font size=
'+1'>-</font></a></td>
<td><a href='javascript:void(0)' onclick='addRowToTable();'><font size=
'+1'>+</font></a></td>
</tr>
</table>
I like the add function as it simply adds a new textarea. However, the remove button removes from the bottom of the form up. How can I make it so that removeRowFromTable removes a specific textarea? For example, if I want to delete one of the textareas in the middle, rather than the last one in the form.
Thanks for any suggestions!
In short, you'll have to find the exact textarea you want to remove (probably by ID).
However, before you go too far down this road hand-rolling ID enumeration and DOM manipulation code, you might want to look at jQuery (http://jquery.com/). jQuery handles oodles of this stuff quite easily via its selector mechanism and will save you from many of the cross-browser headaches you may have if you try to do all this DOM manipulation yourself.
You'll find a lot of questions about jQuery on SO; for example look at how easy this related- and-simple table manipulation is:
What is the best way to remove a table row with jQuery?
IMHO learning jQuery was a tremendous Javascript productivity boosts for me and my team -- it's well worth the time spent in my experience.
I apologize if this kind of question has already been asked but I have looked through "Related Questions" and I don't think anything in here matches with mine, so please bear with me as I try to present my problem and how am I going to go about this, so here I go.
Okay, I will refer you my screenshot. Two of my tables have been generated by using Javascript and one is static and I didn't comment out the tbody tags within a listModulesWithinScene table.
http://img852.imageshack.us/i/haildstabletable.jpg/ (click in the link to view the image)
Here's my cut-down version of my HTML code for those who are interested. I'm pretty much new to this website, even though I do lurk through here from search engine (Google).
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,regular' rel='stylesheet'
type='text/css' />
<link href="cssHomeAutomaionInterface.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/SwitchContent.js"></script>
<script type="text/javascript" src="Scripts/ScrollingImagesInHeader.js"></script>
<script type="text/javascript" src="Scripts/XMLReaderWriter.js"></script>
<script type="text/javascript" src="Scripts/Main.js"></script>
<script type="text/javascript" src="Scripts/PageSpecific/Home.js"></script>
</head>
<body>
<!-- ... -->
<div id="home" class="container">
<div id="menuHome" class="submenu">
</div>
<div id="contentHome" class="content">
<h1>Home Page</h1>
<div id="moduleListArea">
<table id="listModules" class="data">
<caption>Lights and Devices</caption>
<thead>
<tr>
<th style="width: 100px;">Module ID#</th>
<th>Module Name</th>
<th style="width: 60px;">Status</th>
<th style="width: 150px">Action</th>
</tr>
</thead>
<!--<tbody>
<tr style="color: Green;" title="Dimmer">
<th>AB.CD.EF</th>
<td>2x Floor Lamp</td>
<td>75%</td>
<td>
Toggle
<div style="float: right;">
<input style="width: 40px;" id="module1" value="75" />
Set
</div>
</td>
</tr>
<tr style="color: Blue;" title="Switch">
<th>AB.CD.EE</th>
<td>Bedside Fan</td>
<td>ON</td>
<td>
Toggle
</td>
</tr>
</tbody>-->
</table>
</div>
<div id="sceneListArea" style="width: 50%; float: left;">
<table id="listScenes" class="data">
<caption style="text-align: left;">Scenes</caption>
<thead>
<tr>
<th>Scene Name</th>
<th style="width: 80px">Action</th>
</tr>
</thead>
<!--<tbody>
<tr>
<td>Welcome Home</td>
<td>Toggle</td>
</tr>
<tr>
<td>All Lights Off</td>
<td>Toggle</td>
</tr>
</tbody>-->
</table>
</div>
<div id="modulesWithinSceneListArea"
style="width: 50%; float: right;">
<table id="listModulesWithinScene" class="data">
<caption style="text-align: right;">Lights and Devices Within Scene</caption>
<thead>
<tr>
<th style="width: 100px;">Module ID#</th>
<th>Scene Name</th>
<th style="width: 50px">Level</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>2x Floor Lamp</td>
<td>50%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ... -->
</body>
</html>
</code>
Now, let me go ahead and describe my problem.
So anyway, I want to call a function that's in the part of the code:
// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
"_toggle";<br />
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));
I want javascript:ListAllModulesWithinScene(...) that is inside quotes to call the function (ListAllModulesWithinScene(sceneName)) in PageSpecific/Home.js, but nothing happens if I click the List link; so far, it's not working. This is the function that I'm trying to call.
function ListAllModulesWithinScene(sceneName)
{alert("test");
/* The part of the code that I took out fills up the table with the list of modules
that are part of the scene, each module having different levels/settings. */
}
The expected result is that I want to see the alert message box just to make sure it works before I call out the code to generate the rows of data like say...
function ListAllModulesWithinScene(sceneName)
{
/*listModulesWithinScene = document.getElementById("listModulesWithinScene");
// Delete the tbody tag if it does not exist and create a enw tbody tag.
if(listModulesWithinScene.getElementsByTagName("tbody") != null)
listModulesWithinScene.removeChild("tbody");
var listModulesWithinScene_tBody = document.createElement("tbody");
var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");
for (var r = 0; r < xmlRows.length; r++)
{
if (xmlRows[r].getAttribute("name") == sceneName)
{
var moduleRow = xmlRows[r].getElementsByTagName("Module");
if (moduleRow.length > 0)
{
var row = document.createElement("tr");
for (var msr = 0; msr < moduleRow.length; msr++)
{
var moduleRow2 = xmlObj.childNodes[1].getElementsByTagName("Module");
for (var mr = 0; mr < xmlRow2.length; mr++)
{
if (moduleRow[mr].getAttribute("id") ==
xmlObj.childNodes[1].childNodes[mr].getAttribute("id"))
{
var td_id = document.createElement("th");
td_id.appendChild(
document.createTextNode(moduleRow.getAttribute("id")));
td_id.setAttribute("id", "listModulesFromScene_row" + r +
"_id");
row.appendChild(td_id);
var td_name = document.createElement("td");
td_name.appendChild(
document.createTextNode(moduleRow2.getAttribute("name")));
td_name.setAttribute("id", "listModulesFromScene_row" + r +
"_name");
row.appendChild(td_name);
var td_level = document.createElement("td");
td_level.appendChild(
document.createTextNode(moduleRow.getAttribute("level")));
td_level.setAttribute("id", "listModulesFromScene_row" + r +
"_level");
row.appendChild(td_level);
}
}
}
}
}
}
listModulesWithinScene_tBody.appendChild(row);
listModulesWithinScene.appendChild(listModulesWithinScene_tBody);*/
}
In order to help get a better ideal of how my tables are generated, I want to post my entire code. I could provide more details about my problem but that's all I can provide for now.
This is the XMLReaderWriter.js file that I currently have.
/*
When it comes to loading and saving an XML file, it helps to try to keep the XML file organized
and well-formed, so it's best to not to modify the XML file UNLESS you know what you're doing.
The structure of an XML file is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<HomeAutomationInterface>
<Setup>
<Location longitude="" latitude="" />
</Setup>
<Modules>
<!-- The first row is an example. -->
<Module id="1" name="module name" level="ON" type="dimmer">
<!-- ... -->
</Modules>
<Scenes>
<!-- the first row is an example. It can contain multiple modules. -->
<scene name="Scene Name">
<module id="1" level="50">
<module id="2" level="60">
<!-- ... -->
</scene>
<!-- ... -->
</Scenes>
<Timers>
<!-- The following four rows are an example. For DST, sunrise and sunset
is dependent in longitude and latitude. How this works is this:
1. Go to this website and enter your address information.
http://stevemorse.org/jcal/latlon.php
2. Go here and enter your today's date, followed by longitude and latitude,
and time zone: http://www.weatherimages.org/latlonsun.html
3. You should get your information related to sunrise and sunset. It should
look like this:
Thursday
10 March 2011 Universal Time - 5h
SUN
Begin civil twilight 06:30
Sunrise 06:54
Sun transit 12:48
Sunset 18:42
End civil twilight 19:06
Now that's how you get your times for your sunruse and sunset.
-->
<timer name="Timer Name 1" type="regular">
<regular time="hour:minute:second:millisecond">
<module id="1" level="50">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 2" type="regular">
<regular time="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 3" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<module id="1" level="75">
<!-- ... -->
</DST>
</timer>
<timer name="Timer Name 4" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</DST>
</timer>
<!-- ... -->
</Timers>
</HomeAutomationInterface>
It's a long documentation, but it helps to understand what this XML structure is all about.
*/
// Not for Internet Explorer 6 or below.
var xmlDoc;
var xmlObj;
// For HTML tables (<table>)
var listModules;
var listScenes;
var listModulesWithinScene;
// For HTML text boxes
var inputLongitude;
var inputLatitude;
function LoadXML()
{
// ActiveXObject will have to be checked first to see if it's defined. Otherwise, if you
// try to check XMLHttpRequest first, even if Internet Explorer supports it, you will get
// "Access Denied" in Internet Explorer and perhaps not in Firefox.
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("HomeAutomationInterface.xml");
PopulateFromXML();
}
else
{
// If this is the only code in this function, then you will need to put all your
// project in the server, since Internet Explorer has a "Same Origin Policy" which
// I believe that the open method with "GET" causes a problem in Internet Explorer
// but did not cause a problem in Firefox. In order to rectify the problem, the code
// inside if(window.ActiveXObject) makes use of ActiveX.
xmlDoc = new XMLHttpRequest();
xmlDoc.open("GET", "HomeAutomationInterface.xml", null)
xmlDoc.send(null);
if (xmlDoc.status == 200)
{
xmlDoc = xmlDoc.responseXML;
PopulateFromXML();
}
}
}
function PopulateFromXML()
{
listModules = document.getElementById(
"listModules").getElementsByTagName("tbody");
// Gather the text fields for location data.
inputLongitude = document.getElementById("inputLongitude")
inputLatitude = document.getElementById("inputLatitude")
// Firefox's DOM Parser treats whitespaces as text nodes, including
// line breaks.
removeWhitespace(xmlDoc.documentElement);
// Send the document's root element to the XML Object variable.
xmlObj = xmlDoc.documentElement;
// Perform the checks and populate the tables
// and any other elements that are needed.
if (xmlObj.tagName == "HomeAutomationInterface")
{
// Check to be sure the first node is the "Setup" node. It contains the
// location node.
if ((xmlObj.childNodes[0].tagName == "Setup") &&
(xmlObj.childNodes[0].childNodes[0].tagName == "Location"))
{
// Copy the data from one of the attributes to the respective text boxes.
inputLongitude.value = xmlObj.childNodes[0]
.childNodes[0].getAttribute("longitude");
inputLatitude.value = xmlObj.childNodes[0]
.childNodes[0].getAttribute("latitude");
}
// The second node within the root element is Modules node.
// This will be implemented.
if (xmlObj.childNodes[1].tagName == "Modules")
{
//TODO: Implement the XML-to-Table translation that gets info
// about modules.
listModules = document.getElementById("listModules");
var listModules_tBody = document.createElement("tbody");
var xmlRows = xmlObj.childNodes[1].getElementsByTagName("Module");
for (var r = 0; r < xmlRows.length; r++)
{
var xmlRow = xmlRows[r];
var row = document.createElement("tr");
var td_id = document.createElement("th");
td_id.appendChild(document.createTextNode(xmlRow.getAttribute("id")));
td_id.setAttribute("id", "listModules_row" + r + "_id");
row.appendChild(td_id);
var td_name = document.createElement("td");
td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
td_name.setAttribute("id", "listModules_row" + r + "_name");
row.appendChild(td_name);
var td_level = document.createElement("td");
td_level.appendChild(document.createTextNode(xmlRow.getAttribute("level")));
td_level.setAttribute("id", "listModules_row" + r + "_level");
row.appendChild(td_level);
if (xmlRow.getAttribute("type") == "dimmer")
{
row.style.color = "Green";
// Create a new table cell for a dimmer. This will include a toggle,
// a text box, and a set button.
var td_dimmer = document.createElement("td");
// Create a new anchor tag and, set the href to #, and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));
td_dimmer.appendChild(a_toggle);
// Create a new div element to hold a text box and a set button.
var div_floatright = document.createElement("div");
div_floatright.style.float = "right";
// Create a new text box and append it to the div element.
var input_level = document.createElement("input");
input_level.type = "text";
input_level.name = "listModules_row" + r + "_inputLevel";
input_level.id = "listModules_row" + r + "_inputLevel";
input_level.style.width = "40px";
div_floatright.appendChild(input_level);
// Create a new anchor tag, set the href to #, and name it "Set."
var a_set = document.createElement("a");
a_set.href = "#";
a_set.id = "listMoudles_row" + r + "_dimmer_set";
a_set.appendChild(document.createTextNode("Set"));
div_floatright.appendChild(a_set);
// Append the div element to the table cell.
td_dimmer.appendChild(div_floatright);
// Finally, append the table cell to the row.
row.appendChild(td_dimmer);
}
else if (xmlRow.getAttribute("type") == "switch")
{
row.style.color = "Blue";
// Create a new table cell for a dimmer. This will include a toggle,
// a text box, and a set button.
var td_switch = document.createElement("td");
// Create a new anchor tag and, set the href to #, and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));
td_switch.appendChild(a_toggle);
row.appendChild(td_switch);
}
else
{
row.style.color = "Black";
row.appendChild(document.createTextNode("No actions available."));
}
listModules_tBody.appendChild(row);
}
listModules.appendChild(listModules_tBody);
// Uncomment this code and run the example.
//alert(listModules_row0_name.textContent);
}
// The third node within the root element is Scenes node.
// You need modules in order for scenes to work.
// This will be implemented.
if (xmlObj.childNodes[2].tagName == "Scenes")
{
listScenes = document.getElementById("listScenes");
var listScenes_tBody = document.createElement("tbody");
var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");
for (var r = 0; r < xmlRows.length; r++)
{
var xmlRow = xmlRows[r];
var row = document.createElement("tr");
var td_name = document.createElement("td");
td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
td_name.setAttribute("id", "listScenes_row" + r + "_name");
row.appendChild(td_name);
row.appendChild(td_name);
var td_actions = document.createElement("td");
// Create a new anchor tag and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listScenes_row" + r + "_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));
// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
"_toggle";
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));
td_actions.appendChild(a_toggle);
td_actions.appendChild(a_set);
row.appendChild(td_actions);
listScenes_tBody.appendChild(row);
}
listScenes.appendChild(listScenes_tBody);
}
// The last element is the Timers node.
// This will either activate the scene or turn on, off,
// dim, brighten, or set the light level of the module if
// it is the light module or turn on or off the appliance
// module. This will be implemented.
if (xmlObj.childNodes[3].tagName == "Timers")
{
//TODO: Implement a XML-to-Table parser that parses the XML data
// from the timers tag into the timer table.
}
}
}
// I stumbled across http://www.agavegroup.com/?p=32 and I borrowed the code from
// http://stackoverflow.com/questions/2792951/firefox-domparser-problem
// It took me a week to debug all my code until I find out what's going on with Firefox's
// DOM Inspector.
function removeWhitespace(node)
{
for (var i = node.childNodes.length; i-- > 0; )
{
var child = node.childNodes[i];
if (child.nodeType === 3 && child.data.match(/^\s*$/))
node.removeChild(child);
if (child.nodeType === 1)
removeWhitespace(child);
}
}
And now as for my background information, I'm doing this as my project for COP2822 (Scripting for the Web), so it's only Javascript and not server-side, so I have endured a lot of pain, but was able to make it through, so my experience with Javascript is well worth it in the end. I did have some experience with Javascript before I take COP2822, though.
Welcome to SO. Considering you copy pasted your code
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row"
+ r + "_toggle)";//<br />
You had a weird br tag in the middle of your js code and you had a missing ) in the function call.
If you still have issues, post and I'll try to discuss. I suggest getting a browser or extension to your browser that supplies a javascript console. In my opinion it's invaluable to debugging.
i think you want quotes (escaped) around the sceneName parameter value:
a_set.href = "javascript:ListAllModulesWithinScene(\"listScenes_row" + r + "_toggle\")";