PDA

View Full Version : Problem with passing variables to dhtml



kwatts59
08-04-2015, 11:48 PM
1) Script Title: load table from array

2) Script URL (on DD): http://shenlab.sols.unlv.edu/kwatanabe/table_test2.html

3) Describe problem:

I am trying update a program to load an HTML table from an array using dhtml.
The program currently has the table contents hard-coded into the script.
Below is a part of the program with 3 species loaded into the table. There are actually over 100 species.


<table border="0" >
<tr>
<th width="171">Scientific Name</td>
<th width="155">Common Name</td>
<th width="52">Data</td>
</tr>

<tr>
<td><i>Aquilegia caerulea</i></td>
<td>Colorado blue columbine</td>
<td><a href="#" onclick="divwin=dhtmlwindow.open('divbox', 'div', 'tcontent_Ac', 'Aquilegia caerulea', 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1'); return false">link</a></td>
</tr>

<tr>
<td><i>Arabidopsis lyrata</i></td>
<td>Lyre-leaved rock-cress</td>
<td><a href="#" onclick="divwin=dhtmlwindow.open('divbox', 'div', 'tcontent_Al', 'Arabidopsis lyrata', 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1'); return false">link</a></td>
</tr>

<tr>
<td><i>Arabidopsis thaliana</i></td>
<td>Thale cress</td>
<td><a href="#" onclick="divwin=dhtmlwindow.open('divbox', 'div', 'tcontent_At', 'Arabidopsis thaliana', 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1'); return false">link</a></td>
</tr>
</table>

I am trying to replace the above code with the following


<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/tabcontent.js"></script>

<script type="text/javascript">
function addRow() {

var species = ["Aquilegia caerulea","Colorado blue columbine","link",
"Arabidopsis lyrata","Lyre-leaved rock-cress","link",
"Arabidopsis thaliana","Thale cress", "link"]

var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

for (var index = 0; index < species.length; index+=3) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= species[index];
row.insertCell(1).innerHTML= species[index+1];
row.insertCell(2).onclick= function() {divwin=dhtmlwindow.open('divboxdiv','div', 'tcontent_At','Arabidopsis thaliana', 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1'); return false;}
row.insertCell(2).innerHTML= species[index+2];
}

}
</script>
</head>
<body>

<input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>

<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th width="171">Scientific Name</td>
<th width="155">Common Name</td>
<th width="52">Data</td>
</tr>
</table>
&nbsp;

The problem is the call to dhtmlwindow. No matter what link I click on, the title of the open window is "Arabidopsis thaliana".
I tried putting the title name as the species name using the following code but it did not work.


row.insertCell(2).onclick= function() {divwin=dhtmlwindow.open('divboxdiv','div', 'tcontent_At',species[index], 'width=1000,height=500px,left=280px,top=200px,resize=0,scrolling=1'); return false;} -->

If anybody can tell me how I can pass the species name as the window title, please let me know.
Also, the link to the window is on the very narrow box adjacent to where the word "link" appears in the table. If somebody could show me how to make it so that you have to click on the word link, it would be greatly appreciated.
Sincerely,
Ken