Member Avatar for LiBOC

Dear all, :confused:

If I have a javascript variable with a value in it. How do I RETRIEVE the value of it and insert it into my <TD> cell? I am using a table to input values to <CANVAS> tag to draw a graph based on the values in <TD>

You can ignore the part when ZHTML is evaluating with <? z tags

<HTML>
<HEAD><TITLE>Welcome to Version 2</TITLE>

<!-- JavaScript HEAD AREA -->
<script language="javascript" type="text/javascript">
var rowValue; //Global variable to manipulate.
</script>

<!-- For canvas -->
<!-- <script type="text/javascript"> -->
<script language="javascript" src="jsclass.js" type="text/javascript"></script>
<!-- for canvas -->
 
<!-- END OF ALL JAVASCRIPT codes up to this point-->
</HEAD>

<body>

<center><img SRC="homeWelcome.png"><br></center>

<?z if ($rowValue== $rowValue) { ?>
<script type="text/javascript">rowValue=25;</script>
<?z } ?>
<!-- <script type="text/javascript">alert(rowValue);</script> -->

<table id="data" style="display:none";>
          <thead>
            <tr>
              <th scope="col">X</th>
              <th scope="col">Y</th>
             </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">0</th>
                <td><!-- Retrieve Javascript variable value here--></td>
            </tr>
            <tr>
              <th scope="row">1</th> <!-- X-axis data -->
                <td>25</td> <!-- Y-axis data -->
            </tr>
            <tr>
              <th scope="row">2</th>
                <td>60</td>
            </tr>
            <tr>
              <th scope="row">3</th>
                <td>25</td>
            </tr>
            <tr>
              <th scope="row">4</th>
                <td>84</td>
            </tr>
           <tr>
              <th scope="row">5</th>
                <td>62</td>
            </tr>
           <tr>
              <th scope="row">6</th>
                <td>71</td>
            </tr>
           <tr>
              <th scope="row">7</th>
                <td>33</td>
            </tr>
           <tr>
              <th scope="row">8</th>
                <td>5</td>
            </tr>
            <tr>
              <th scope="row">9</th>
                <td>90</td>
            </tr>
          </tbody>
        </table>
     <p>
     
      <canvas id="graph">
      This is a test.. if this is shown, canvas tag ignored by browser
      </canvas>

<script type="text/javascript">
          var g = new Bluff.Line('graph', '500x500'); //name of canvas,400
          g.y_axis_increment = 5; 
          g.data_from_table('data',false);  
          g.minimum_value=0;
          g.maximum_value=100;
          g.draw();
</center>
</BODY>
</HTML>

I had attached the graph that is produced by the above coding. -See below-


Thanks so much in advance and for your precious time! :P

graph.JPG 35.13 KB
  • 3 Contributors
  • 3 Replies
  • 3K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by hhhff
Member Avatar for essential

Here's a bit of example of getting Javascript variables into cells.

<?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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Getting Javascript Variable and Display into Table Cell</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

  table {
  border-top : 1px solid;
  border-collapse;
  margin : 1em auto 0 auto;
  padding : 0;
  text-align : left;
  width : 100%; }

  td, th {
  font : normal normal normal 12pt Verdana, Arial, sans-serif;
  border-bottom : 1px solid;
  white-space : pre;
  vertical-align : middle;
  padding : .300em 1em .300em 1em; }

table th:first-child {
  border-right : 1px solid;
  background-color : #ccc;
  width : 20%; }

input[type="text"] {
  text-align : center;
  font-weight : bold;
  min-height : 18px;
  border : 1px solid;
  width : 100%; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var jVars;
    jVars = [ "var1", "var2", "var3" ];
var getVars;
   getVars = function() {
      table = (( document.getElementById ) ? document.getElementById("data") : (( document.all ) ? document.all.data : document.layers.data )); // Table Element

   cel = table.rows[ 0 ].cells; // Table cell.
      for ( var x = 0; x < cel.length; x++ ) {

// Can be set to gather any data into string, using the methods below. 
 
      table.rows[ 0 ].cells[ x ].appendChild( document.createTextNode( "Appended : " + jVars[ x ] )); // Appending variables into ROW 1 

      table.rows[ 1 ].cells[ x ].innerText = "Injected : " + jVars[ x ]; // Injecting variables into ROW 2
      }
   }
window.onload = getVars;
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">

<h2 class="m-title">Getting Javascript Variables</h2>
<table id="data" frame="void" rules="none" summary="Getting Javascript Variables and passing it into Table Cell.">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>

hope it gets what you need...

Member Avatar for LiBOC

It solved my problems with the following codes. Thanks for your detailed help anyways!

<tr>
              <th scope="row">0</th>
                <td><script type="text/javascript">document.write(preDefinedValue);</script></td>
            </tr>
Member Avatar for hhhff

ddgdf

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.