JavaScript - To Retrieve The Contents Of The Columns Of A <table>?
Good morning!
I am Brazilian, sorry if there is a clerical error because I used the Google translator. I'm having trouble recovering in JS content of the columns of a <TABLE>. I did many searches but found nothing that could help me. I appreciate any help. Thank you! Manoel Zancheta Similar TutorialsHi, How I build a table based on a list under a <DIV></DIV> like this? printing: 1 and: 3 typesetting: 2 industry: 2 has: 2 been: 1 s: 1 standard: 1 ever: 1 since: 1 1500s: 1 when: 1 an: 1 unknown: 1 printer: 1 took: 1 a: 2 galley: 1 type: 3 scrambled: 1 Regards Bob I am building an e-learning lesson in Lectora that will be deployed to a SCROM compatible learning management system. The lesson is converted into HTML before that happens. My table of contents is around 100 pixels wide but some of the page names are longer than that and do not display fully when viewed in a browser. What I am trying to do is this: The page name for this page is very, very long and I can't see it all. Blah blah Would become The page name for this page is very, very long and I can't see it all. Blah blah I've been led to believe there is javascript that will do that. Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction. I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console. It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade. Basically there are two issues so far, one needs to be solved so the other can be as well. First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where it is this code: PHP Code: //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved. The document should expand and collapse with the menu. Here is my javascript code: PHP Code: /* New Perspectives on JavaScript, 2nd Edition Tutorial 7 Tutorial Case Author: Mike Cleghorn Date: 2-15-10 Filename: toc.js Global Variables: sections An array contain the HTML elements used as section headings in the historic document Functions List: addEvent(object, evName, fnName, cap) Adds an event hander to object where evName is the name of the event, fnName is the function assigned to the event, and cap indicates whether event handler occurs during the capture phase (true) or bubbling phase (false) makeTOC() Generate a table of contents as a nested list for the contents of the "doc" element within the current Web page. Store the nested list in the "toc" element. levelNum(node) Returns the level number of the object node. If the object node does not represent a section heading, the function returns the value -1. createList() Goes through the child nodes of the "doc" element searching for section headings. When it finds a section heading, a new entry is added to the table of contents expandCollapse() Expands and collapse the content of the table of contents and the historic document expandCollapseDoc() Goes through the child nodes of the "doc" element determining which elements to hide and which elements to display isHidden(object) Returns a Boolean value indicating whether object is hidden (true) or not hidden (false) on the Web page by examining the display style for object and all its parent nodes up to the body element */ function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } addEvent(window, "load", makeTOC, false); var sections = new Array("h1","h2","h3","h4","h5","h6"); var sourceDoc; //document on which TOC is based on function makeTOC(){ var TOC = document.getElementById("toc"); TOC.innerHTML = "<h1>Table of Contents</h1>"; var TOCList = document.createElement("ol"); TOC.appendChild(TOCList); sourceDoc = document.getElementById("doc"); //generate list items containing section headings createList(sourceDoc, TOCList); } function levelNum(node) { for (var i = 0; i < sections.length; i++) { if(node.nodeName == sections[i].toUpperCase()) return i; } return -1; //node is not section heading } function createList(object, list) { var prevLevel = 0; //level of the pervious TOC entry var headNum = 0; //running count of headings for (var n = object.firstChild; n != null; n = n.nextSibling) { //loop through all nodes in object var nodeLevel = levelNum(n); if (nodeLevel != -1) { //node represents a section heading //insert id for the section heading if necessary headNum++; //create list item to match var listItem = document.createElement("li"); listItem.id = "TOC" + n.id; //create hypertext link to the section heading var linkItem = document.createElement("a"); linkItem.innerHTML = n.innerHTML; linkItem.href = "#" + n.id; //append the hypertext to the list entry listItem.appendChild(linkItem); if (nodeLevel == prevLevel) { //append the entry to the current list list.appendChild(listItem); } else if (nodeLevel > prevLevel) { //append entry to new nest list var nestedList = document.createElement("ol"); nestedList.appendChild(listItem); list.lastChild.appendChild(nestedList); //add plus/minus box beffore the text var plusMinusBox = document.createElement("span"); plusMinusBox.innerHTML = "--"; addEvent(plusMinusBox, "click", expandCollapse, false) nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling); list = nestedList; prevLevel = nodeLevel; } else if (nodeLevel < prevLevel) { //append entry to a higher-level list var levelUp = prevLevel - nodeLevel; for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;} list.appendChild(listItem); prevLevel = nodeLevel; } } } } function expandCollapse(e) { var plusMinusBox = e.target || event.srcElement; var nestedList = plusMinusBox.nextSibling.nextSibling; //Toggle the plus and minus symbol if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+" else plusMinusBox.innerHTML = "--"; //Toggle display of nested list if(nestedList.style.display == "none") nestedList.style.display = "" else nestedList.style.display = "none"; //expand/collapse doc to match TOC expandCollapseDoc(); } function expandCollapseDoc() { var displayStatus = ""; for (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) { var nodeLevel = levelNum(n); if (nodeLevel != -1) { //determain display status of TOC entry var TOCentry = document.getElementById("TOC" + n.id); if (isHidden(TOCentry)) displayStatus = "none" else displayStatus = ""; } if (n.nodeType == 1) { //apply to current status for the node n.style.display = displayStatus; } } } function isHidden(object) { for (var n = object; n.nodeName != "BODY"; n = n.parentNode) { if (n.style.display = "none") return true; } return false; } the html was too long, so i uploaded it to my webspace you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm Again thank you so much! Any questions just ask! Hi I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far Code: <form name="frm3" method="post" action="bookingscript.php"> <input type="hidden" name="adult2fn" value="$adult2name" /> <script Language="JavaScript"> var name1 = document.frm3.adult2fn.value; if(name1 =="") {alert("hello");document.getElementById("hidden_row").style.display = 'none';} else {alert("no way");document.getElementById("hidden_row").style.display = '';}; </script> <table border="1"> <tr> <td>Always visible</td> </tr> <tr id="hidden_row"> <td>Hide this</td> </tr> <tr> <td>Always visible</td> </tr> </table> </form> If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows. I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8 Could someone please tell me the error of my ways. Many thanks Richard Hi all, What I am trying to achieve. I have a php page that has a button on it when clicked shows a div (previously hidden) in the middle of the page this div contains a table with rows. Each row has an image acting as a button and a series of fields that are populated from a database. One of the fields is a quantity box I want to be able to change the value in this box and click on the submit img and have it submit this info (including the altered quantity) back to the php page or to the submit function so that I can then access the values. I have absolutly no idea how to start this. I have very limited javascript experience. the submit looks something like (at the moment) Code: echo '<a href="#" onclick="javascript: document.getElementById(\'stockitemid\').value = '.$stockline->purchaseitemid.'; submitbutton(\'addLineFromStock\')" >'.$purchaseLineImg.'</a>'; and then I was trying to alert in the submit function something like: Code: alert(document.getElementById('stockitemid').value); my div td fields look like Code: <td> <input type="text" size="3" name="sid[<?php echo $stockline->purchaseitemid; ?>]" id="stockitemid<?php echo $count; ?>" value="<?php echo $stockline->purchaseitemid; ?>" /> </td> <td> <input type="text" size="3" name="stockqty[<?php echo $stockline->purchaseitemid; ?>]" id="stockquantity" value="<?php echo $stockline->quantitysupplied; ?>" /> </td> Any help would be greatly appreciated Thanks Kate I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue). Code: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>ABC Book Store</title> <style type="text/css"> <!-- .style1 { font-size: 10pt; } --> </style> <script> function ld_fiction() { var doc=nb_fiction.XMLDocument; doc.load("fiction.xml"); document.getElementById("head_id").innerHTML="Fiction "; } function Id_nfiction() { var doc_s=nb_nfiction.XMLDocument; doc_s.load("nfiction.xml"); document.getElementByID("head_id_d").innerHTML="NonFiction"; } function ID_selfhelp() { var doc_t=nb_selfhelp.XMLDocument; doc_t.load("selfhelp.xml"); document.getElementByID("head_id_e").innerHTML="SelfHelp"; } function ID_reference() { var doc_u=nb_ref.XMLDocument; doc_u.load("ref.xml"); document.getElementByID("head_id_f").innerHTML="Reference"; } function ID_mags() { var doc_v=nb_mags.XMLDocument; doc_v.load("mags.xml"); document.getElementByID("head_id_g").innerHTML="Mags"; } </script> <XML id="nb_fiction" src="fiction.xml"></XML> <XML id="nb_nfiction" src="nfiction.xml"></XML> <XML id="nb_selfhelp" src="selfhelp.xml"></XML> <XML id="nb_ref" src="ref.xml"></XML> <XML id="nb_mags" src="mags.xml"></XML> <object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0"></object> <body> <table width="30%" border="0" align="left" cellspacing="1" font size="10"> <tr bgcolor="#CCCCCC"> <td colspan="2"> <table id="FICTIONTABLE" table width="100%" datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF"> <caption> <span>Fiction </span> </caption> <thead> <tr> <th span class="style1">Stock No.</th></span> <th span class="style1">Title</th></span> <th span class="style1">Author</th></span> <th span class="style1">Status</th></span> <th span class="style1">Price</th></span> <th span class="style1">Publisher</th></span> <th span class="style1">Year of Release</th></span> </tr> </thead> <tbody> <tr> <td><span class="style1" datafld="stock"></td></span> <td><span class="style1" datafld="title"></td></span> <td><span class="style1" datafld="author"></td></td></span> <td><span class="style1" datafld="status"></td></span> <td><span class="style1" datafld="price"></td></span> <td><span class="style1" datafld="publisher"></td></span> <td><span class="style1" datafld="year"></td></span> </tr> </tbody> </table> </td> </tr> </body> </html> I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables. I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done. Any help would really be appreciated and thanks in advance. Hi there, I am trying to extract all of the values from the 5th column (Assignee) in this HTML table http://bugzilla.maptools.org/buglist...icksearch=test and don't know how to proceed. Is there a clever way of getting the entire col class: <col class="bz_op_sys_column"> before putting into an array. thanks, kev I have been able to use javascript to place the last modified date in the bottom left corner of my document however I do not need the time with it. How do I use the substring() method on the lastModified property? Here is what it looks like. Code: <script type="text/javascript"> <!--Hide from old browsers var today = new Date() var dayofweek = today.toLocaleString() dayLocate = dayofweek.indexOf(",") weekDay = dayofweek.substring(0, dayLocate) newDay = dayofweek.substring() dateLocate= newDay.indexOf(",") monthDate = newDay.substring(0, dateLocate+1) yearLocate = dayofweek.indexOf("2011") year = dayofweek.substr(yearLocate, 4) document.write("<p style='font-family:bold, Arial, Helvetica, sans-serif; font-size:xx-small; color:#000000'>") document.write("Copyright the Huysken Performing Arts Center. ") document.write("<br />This document was last modified "+document.lastModified+"</p>") The text book says to use a substring() method on the lastModified property, but I am uncertain on how to do that. Any help is greatly appreciated, Thank you. Hi guys, i need to retrieve the url created in the following script and embed it in the player below. Here is what i have. You can see how it works (and doesn't) here http://www.brittv.co.uk/template.php...ws.stream_360p Code: <html> <head> <title>...</title> <?php $URL_GETKEY="http://www.uktvlive.com/tvc/key.php"; function doCurl($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); curl_close($ch); return $output; } $a=doCurl($URL_GETKEY); $split=explode("<split>",$a); ?> <script type="text/javascript"> // parse the querystring and create a dictionary of terms for later use: var qs = [ ]; // where the dictionary goes if ( location.search.length > 1 ) { var pairs = location.search.substring(1).split("&"); for ( var p = 0; p < pairs.length; ++p ) { var pair = pairs[p].split("="); qs[pair[0]] = unescape( pair[1] ); } } // do the replacements *after* page is loaded, for simplicity: function doReplacements( ) { var link = document.getElementById("link1"); link.href = "rtsp://81.104.67.230/"+ qs["host"] + "/" + qs["stream"] + "?userID=" + "<?php echo $split[5];?>" + "&accessKey=" + "<?php echo $split[6];?>" + "&sdp=alt&device=mobile"; link.innerHTML = qs["page"]; // and of course you could do any other replacements, too. } window.onload = doReplacements; </script> </head> The following part produces the url Code: <body> <br/><br/> <a id="link1">Generic Link</a> <br/><br/> Lastly we have the player embed code, this is where im stuck im afraid Code: <script type="text/javascript"> var url = qs["link1"]; // or whatever name it was passed by document.write('<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ' + ' WIDTH="300" HEIGHT="160" ' + ' CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">\n' + '<PARAM name="SRC" VALUE = "http://www.tvpc.com/images/image1.gif" >\n' + '<PARAM name="QTSRC" VALUE = "' + url +'" >\n' + '<PARAM name="HREF" VALUE = "' + url + '" >\n' + '<PARAM name="AUTOPLAY" VALUE = "true" >\n' + '<PARAM name="CONTROLLER" VALUE = "true" >\n' + '<PARAM name="TYPE" VALUE = "video/quicktime" >\n' + '<PARAM name="TARGET" VALUE = "myself" >\n' + '<EMBED \n' + ' SRC = "#" \n' + ' QTSRC = "' + url + '" \n' + ' HREF = "' + url + '" \n' + ' TARGET = "myself"\n' + ' CONTROLLER = "true"\n' + ' WIDTH = "300" \n' + ' HEIGHT = "160" \n' + ' LOOP = "false" \n' + ' AUTOPLAY = "true" \n' + ' PLUGIN = "quicktimeplugin" \n' + ' TYPE = "video/quicktime" \n' + ' CACHE = "false" \n' + ' PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >\n' + '</EMBED>\n' + '</OBJECT>\n' ); </script> </body> </head> Thanks in advance guys Hi guys can help me are very little versed in javascript ... I explain my problem! I have a table where they passed the results of a query ... The table field is called Article and consists of about 500 characters, but the substring in the table with a step the first 40 characters, and now the question arises ... I would click on the text of the article and see the page the entire article ... Code: query="SELECT * FROM Articolo ORDER BY titolo DESC"; ResultSet r = stmt.executeQuery(query); %> <table border="1"> <tr><td> titolo </td> <td> articolo </td> <td> data inser </td></tr> <% while(r.next()) { Tot = r.getString("titolo"); Art = r.getString("articolo"); dat = r.getString("data_inserimento"); String meta = ""; String metadata = ""; meta = Art.substring(0,40); metadata = dat.substring(0, 10); StringBuffer sb = new StringBuffer(meta); sb.replace(37,40, "..."); String s2 = sb.toString(); %> <tr> <td> <%= Tot %> </td> <td> <a href="#" onClick="this.innerText = '<%= Art %>';"><%= s2 %></a> </td> <td> <%= metadata %> </td> </tr> <% } %> </table> hi all, as i am very stupid in javascript.... supposing i had a select box on a page with an id of "select1" and name of "select1" as well... using javascript how would i access the select box's selected value and how would i print it out on the screen.... thanks in advance.... cheers sanjeev Hello, I'm very new to JavaScript as well as this forum, so apologies if I mess up somewhere. Okay, so I have a HTML doc with a JavaScript attached to it, and in the HTML I have a checkbox. All I want to do is to pass the checkbox data to Javascript as a true/false. Okay, so below is my HTML: Code: <head> <script type="text/javascript" src="java.js"></script> </head> <body> <input id="toggle" type="checkbox" value=""> </body> And this is my JS: Code: var toggleData = false; Now where do I go from here? I tried using getElementByld('toggle'); But no result. I sure would appetite some help here. Thanks Hi, I have several input text boxes in a <FIELDSET> tag. I would like to load id attributes of the <FIELDSET> tag into an array and then process the array. My code example is below my signature. Thank You in Advance for Your Help, Lou Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function DisplayDetails(obj_id) { alert("DisplayDetails(" + obj_id + ")"); var form_object = new Array(document.getElementById(obj_id)); var form_elements = form_object.elements; alert(form_object[0]); } </SCRIPT> </HEAD> <BODY> <font size="4" face="Arial" color='Black'> Hi Barney <form> <fieldset id="Person1"> <legend>Person 1:</legend> Name: <input type="text" id="name1" size="30" /><br /> Email: <input type="text" id="email1" size="30" /><br /> Date of birth: <input type="text" id="dob1" size="10" /> </fieldset> </form> </font> <button type="button" onclick="DisplayDetails('name1')">Click Me!</button> </html> Hi there I am trying to retrieve xml data using the prototype Ajax.Request. I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes here is the function I am using to try and populate a text field Code: function makeMarkerXml() { new Ajax.Request('coords.xml', { method:'post', onSuccess: function(transport){ ////this will not work///////// var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text; /////////////////////////////// }, onFailu function(){ alert('Call failed') } }); } can anyone help? Hello I am trying to iterate out the values of an xml file. I have got the file to load though I have not yet been able to extract the values. Considering that theXml is an xml file and 'coords' are tags containing a coordinate how would I extract the value. Here is the code I am using Code: var coordTags = theXml.getElementsByTagName( 'coords' ); var len =coordTags.length;///this works var coord =coordTags[0].value;///this doesn't work var coord =coordTags[0].text;///this doesn't work var coord =coordTags[0].innerText;///this doesn't work parent.document.receiver.theres.value = coord; I am sure for some of you this is a really simple question so please someone help!! Hi, I know there are several ways to do this- but which way is best practice? I can access a variable from one function by making it a global variable, but I read that this isn't the most ideal way, and is a last resort. So for example if I have this: Code: function num1(){ var firstNum = 35; return firstNum; } function num2(){ var secNum = 52; return secNum; } function addNums(x,y){ var f = num1(x); var s = num2(y); var total = f + s; alert(total); } Then I call this function with a button. Now, I know this works, but it doesn't seem like a very good way to do what I'm after. Or is it? Any help/ tips would be great. edit: The idea is that the functions won't just return a single value and that's it. They will return a users choice in a given scenario, so they might return the user's age from the first function, then their location in the next etc etc, then I want to use this information in a separate function. Hi guys, I'm new to the forum, and new to JavaScipt. Here's my problem. I create a form dynamically with Java Script dependin on certail actions a user choose. The end result is a form asking the user to confirm sending one or more SMS message via a mesage gateway outside of my system. Confirmation will then trigger a funtion with one or more statements like this: [CODE] document.frmSMS.action ="http://www.infobip.com/Addon/SMSService/SendSMS.aspx?user=User&password=Password&sender=Sender&SMSText=Friendly Reminder from Joe Bloggs Pty Ltd: You have an outstanding amount of R 4,534.00 that is 135 days ovedue. Please settle to as soon possible.&IsFlash=0&GSM=27826555959"; document.frmSMS.submit(); [ICODE] The target site then responds with either an error code (i.e. -10) or a reference number. The question is - How do I retrieve the error code?? Your assistance will be appreciated. NicOos HI I'm using this form in my site, but I want to amend it so the form updates based on the option ID, not the option Value. This will make it easier for me to save the correct data in the value field.. Any ideas ? PHP Code: <html> <head> <script type="text/javascript"> function setOptions(chosen) { var selbox = document.myform.opttwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> </head> <body> <form name="myform"><div class="centre"> <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);"> <option id="0" value=" " selected="selected"> </option> <option id="1" value="1">First Option</option> <option id="2" value="2">Second Choice</option> <option id="3" value="3">Third Choice</option> </select><br /> <br /> <select name="opttwo" size="1"> <option value=" " selected="selected">Please select one of the options above first</option> </select> <input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);"> </div></form> </body> </html> So how do I get CHOSEN to equal the ID not the value ? Thanks |