Jump to content

Button Output In Different Table Cell.


mtber
 Share

Recommended Posts

I am trying to get my button output to be inserted into the table cell beneth that of the button. my HTML code is posted below.

<html><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="revisedtest.js"></script><body><table border="1"><thead>Testing</thead><tr><td><button type="Load" onclick="test()">click me</button></td><td><button type="revised" onclick="revised()">make revised</button></td></tr><tr><td> </td><td> </td></tr></table></body></html>

Link to comment
Share on other sites

well i cant see what is in your js files, but you could put an id on on the info you want changed... like this for example

<td><span id="cell1"> </span></td><td><span id="cell2"> </span></td>

Then you could have javascript to change what is within those span tags

document.getElementById("cell1").innerHTML=whatever;document.getElementById("cell2").innerHTML=whatever;

Link to comment
Share on other sites

I understand what you are saying but i am not sure how to do this with my .js file.

function test(){var xmlDoc=null;if (window.ActiveXObject){// code for IExmlDoc=new ActiveXObject("Microsoft.XMLDOM");}else if (document.implementation.createDocument){// code for Mozilla, Firefox, Opera, etc.xmlDoc=document.implementation.createDocument("","",null);}else{alert('Your browser cannot handle this script');}if (xmlDoc!=null) {xmlDoc.async=false;xmlDoc.load("test.xml");var x=xmlDoc.getElementsByTagName("computer");document.write("<table border='1'>");document.write("<thead>");document.write("<tr><th>Maker</th><th>Price</th><th>Model</th><th>Speed</th></tr>");document.write("</thead>");document.write("<tfoot>");document.write("<tr><th colspan='4'>Computer Parts</th></tr>");document.write("</tfoot>");for (var i=0;i<x.length;i++){ document.write("<tr>");document.write("<td>");document.write(x[i].getElementsByTagName("maker")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");}}

Link to comment
Share on other sites

I understand what you are saying but i am not sure how to do this with my .js file.
function test(){var xmlDoc=null;if (window.ActiveXObject){// code for IExmlDoc=new ActiveXObject("Microsoft.XMLDOM");}else if (document.implementation.createDocument){// code for Mozilla, Firefox, Opera, etc.xmlDoc=document.implementation.createDocument("","",null);}else{alert('Your browser cannot handle this script');}if (xmlDoc!=null) {xmlDoc.async=false;xmlDoc.load("test.xml");var x=xmlDoc.getElementsByTagName("computer");document.write("<table border='1'>");document.write("<thead>");document.write("<tr><th>Maker</th><th>Price</th><th>Model</th><th>Speed</th></tr>");document.write("</thead>");document.write("<tfoot>");document.write("<tr><th colspan='4'>Computer Parts</th></tr>");document.write("</tfoot>");for (var i=0;i<x.length;i++){ document.write("<tr>");document.write("<td>");document.write(x[i].getElementsByTagName("maker")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");}}

I believe what you want is to change all the document.write's to document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+whateverYouWantToAdd. (Note the "cell2" id for the cell that you want the stuff to be written to.) Just conecate what's already in the second cell with what you are tyring to add. For example:HTML
<html><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="revisedtest.js"></script><body><table border="1"><thead>Testing</thead><tr><td><button type="Load" onclick="test()">click me</button></td><td><button type="revised" onclick="revised()">make revised</button></td></tr><tr><td> </td><td id="cell2"> </td></tr></table></body></html>

JavaScript

document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+"<table border='1'>";...etc....;

I believe this is what you want?

Link to comment
Share on other sites

I believe what you want is to change all the document.write's to document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+whateverYouWantToAdd. (Note the "cell2" id for the cell that you want the stuff to be written to.) Just conecate what's already in the second cell with what you are tyring to add. For example:HTML
<html><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="revisedtest.js"></script><body><table border="1"><thead>Testing</thead><tr><td><button type="Load" onclick="test()">click me</button></td><td><button type="revised" onclick="revised()">make revised</button></td></tr><tr><td> </td><td id="cell2"> </td></tr></table></body></html>

JavaScript

document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+"<table border='1'>";...etc....;

I believe this is what you want?

Ok i get what you are saying...i will try this...thanks for the help.!
Link to comment
Share on other sites

LaLaLa... i tried what you suggested and the table did not get displayed inside of the cell i only get the first item of the xml file and that is all thats displayed.
Well yes, that's because I only changed the first line and use "...etc...." to indicate that you needed to make the same changes to the rest of the lines of code in your example. Replace the document.write with what I showed you for everything else.
Link to comment
Share on other sites

Well yes, that's because I only changed the first line and use "...etc...." to indicate that you needed to make the same changes to the rest of the lines of code in your example. Replace the document.write with what I showed you for everything else.
I did all of what you suggested and the only thing that it outputs is the headings.
function test(){var xmlDoc=null;if (window.ActiveXObject){// code for IExmlDoc=new ActiveXObject("Microsoft.XMLDOM");}else if (document.implementation.createDocument){// code for Mozilla, Firefox, Opera, etc.xmlDoc=document.implementation.createDocument("","",null);}else{alert('Your browser cannot handle this script');}if (xmlDoc!=null) {xmlDoc.async=false;xmlDoc.load("test.xml");var x=xmlDoc.getElementsByTagName("computer");document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<table border='1'>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<thead>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<tr><th>Maker</th><th>Price</th><th>Model</th><th>Speed</th></tr>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</thead>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<tfoot>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<tr><th colspan='4'>Computer Parts</th></tr>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</tfoot>";for (var i=0;i<x.length;i++){ document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<tr>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<td>";document.getElementById("cell1").innerHTML=document.write(x[i].getElementsByTagName("maker")[0].childNodes[0].nodeValue);document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</td>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<td>";document.getElementById("cell1").innerHTML=document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</td>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<td>";document.getElementById("cell1").innerHTML=document.write(x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue);document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</td>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"<td>";document.getElementById("cell1").innerHTML=document.write(x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue);document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</td>";document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</tr>";}document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"</table>";}}

Link to comment
Share on other sites

You should really simplify that code. By simplifying it, I found these document.write() statements which are making your program behave incorrectly. The document.write() method erases everything on the page before writing if it's called after the page has loaded.Try this code:

function test() {  var xmlDoc=null;  if (window.ActiveXObject) {	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  } else if (document.implementation.createDocument) {	xmlDoc=document.implementation.createDocument("","",null);  } else {	alert('Your browser cannot handle this script');  }  if (xmlDoc!=null) {	xmlDoc.async=false;	xmlDoc.load("test.xml");	var x=xmlDoc.getElementsByTagName("computer");	el = document.getElementById("cell1");	el.innerHTML += "<table border='1'>";	el.innerHTML += "<thead>";	el.innerHTML += "<tr><th>Maker</th><th>Price</th><th>Model</th><th>Speed</th></tr>";	el.innerHTML += "</thead>";	el.innerHTML += "<tfoot>";	el.innerHTML += "<tr><th colspan='4'>Computer Parts</th></tr>";	el.innerHTML += "</tfoot>";	for (var i=0;i<x.length;i++) {	  el.innerHTML += "<tr>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("maker")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "</tr>";	}	el.innerHTML += "</table>";  }}

Link to comment
Share on other sites

You should really simplify that code. By simplifying it, I found these document.write() statements which are making your program behave incorrectly. The document.write() method erases everything on the page before writing if it's called after the page has loaded.Try this code:
function test() {  var xmlDoc=null;  if (window.ActiveXObject) {	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  } else if (document.implementation.createDocument) {	xmlDoc=document.implementation.createDocument("","",null);  } else {	alert('Your browser cannot handle this script');  }  if (xmlDoc!=null) {	xmlDoc.async=false;	xmlDoc.load("test.xml");	var x=xmlDoc.getElementsByTagName("computer");	el = document.getElementById("cell1");	el.innerHTML += "<table border='1'>";	el.innerHTML += "<thead>";	el.innerHTML += "<tr><th>Maker</th><th>Price</th><th>Model</th><th>Speed</th></tr>";	el.innerHTML += "</thead>";	el.innerHTML += "<tfoot>";	el.innerHTML += "<tr><th colspan='4'>Computer Parts</th></tr>";	el.innerHTML += "</tfoot>";	for (var i=0;i<x.length;i++) {	  el.innerHTML += "<tr>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("maker")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "<td>";	  el.innerHTML += x[i].getElementsByTagName("speed")[0].childNodes[0].nodeValue;	  el.innerHTML += "</td>";	  el.innerHTML += "</tr>";	}	el.innerHTML += "</table>";  }}

I tried this and my output was just {MakerPriceModelSpeedComputer Parts} that is what was in cell1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...