JavaScript - Access Row Data From A Table Within Tables
I have a table within a table, that is to say the table is embedded in a <tr> tag in another table and would like to extract row and cell data to make an ajax call. The table in question has several input fields and a submit button on each row. While I can find the table where the submit came from and can get the data from the <td> elements which contain data i.e.<? echo AsOfDate; ?>, I can't find the correct syntax to retrieve the data from the input fields in that same row.
Can someone give me the correct syntax to retrieve the input data? Thanks, Tom var AssetTbl = document.getElementsByTagName('table'); for (i =0; i< AssetTbl.length; i++) { if (AssetTbl[i].id == "tblAssetHx") { RowID =AssetTbl[i].rows[1].cells[0].childNodes[0].data; if (RowID == ID) { // this syntax works to get the data from the non input fields // alert(AssetTbl[i].rows[1].cells[0].childNodes[0].data); // this doesn't work to get the input field data obviously! alert(document.getElementById('AssetTbl[i]').rows[1].cells[5].childNodes[0].data); } } } Table row HTML <tr> <td><? echo $AssetID; ?></td> <td><? echo $LastAsOfDate; ?></td> <td><? echo $LastQuantity; ?></td> <td><? echo $LastPrice; ?></td> <td><? echo $LastCurrentValue; ?></td> <td><input name="txtAsOfDate" id="txtAsOfDate" type="text" /></td> <td><input name="txtQuantity" id="txtQuantity" type="text" /></td> <td><input name="txtPrice" id="txtPrice" type="text" /></td> <td><input name="txtCurrentValue" id="txtCurrentValue" type="text" /></td> <td><input name="Submit" type="submit" value="Submit" onclick="GetAssetHxData(<? echo $AssetID; ?>)" /></td> </tr> Similar TutorialsI want to be able to read and write on a Google spreadsheet using a Greasemonkey script that runs on Facebook webpage. I have tried the example made by Google( http://gdata-javascript-client.googl...y_manager.html ) but it doesn't seem to work anymore. Are there any other implementations-examples of a userscript using Google data API to store data? I want to be able to retrieve encryption and decryption passwords on a userscript running on Facebook so it can encrypt-decrypt text. I was wondering if anyone could help me with getting this working. I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus. I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B]. My code for javascript function and html table are below: Code: function calculate(textID){ var table = document.getElementById('course'); //id of table var rowCount = table.rows.length; var array = []; //array to hold the values var c = 0; dmenus = document.getElementByTagName("select"); //get the drop down menus for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings var row = table.rows[a]; var check = row.cells[0].childNodes[0]; if(null != check && true == check.checked){ for(var b = 0; b < dmenus.length; b++){ val = dmenus[b].options[dmenus[b].selectedIndex].value; array[c] = val; //set index of array to equal value of dropdown box c++; } }else{ b++; } } Html code for table: Code: <table id="course"> <tr> <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td> <th style="color:white">Course Title</th> <th style="color:white">Credits</th> <th style="color:white">Grade</th> </tr> <tr> <td><input type="checkbox" name="tick" id="tick"/></td> <td><input type="text"/></td> <td> <select name="credits" id="credits"> <option...</select></td> <td> <select name="grade" id="grade"> <option...</td> It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables? Here is what I have so far: Code: function f(tableID){ var len = document.getElementById(tableID).rows.length; for(var i = 1; i<len; i++){ var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0]; credits = c.options[c.selectedIndex].text; } } Your help would be really appreciated I have here a code that will automatically generate two text fields (Title & Price) when "Add another article" is pressed. I got this from the web, but I want instead of using a text field, I want it to create a drop down menu based on a mysql table, then update the price automatically (also based on the mysql table) on the other text field once a selection has been made on the drop down menu. Code: <link rel="stylesheet" type="text/css" media="screen" /> <style type="text/css"></style> <script type="text/javascript"> var elCount = 2; function add() { var parent = document.getElementById('parent'); var article = document.createElement('DIV'); article.id = 'article_' + elCount; article.name = 'article_' + elCount; // NEW LINE var article_title_label = document.createElement('LABEL'); article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': ')); var article_title_text = document.createElement('INPUT'); article_title_text.id = 'article_' + elCount + '_title'; article_title_text.name = 'article_' + elCount + '_title'; // NEW LINE var article_textarea_label = document.createElement('LABEL'); article_textarea_label.appendChild(document.createTextNode('Price ' + elCount + ': ')); var article_textarea = document.createElement('INPUT'); article_textarea.id = 'article_' + elCount + '_price'; article_textarea.name = 'article_' + elCount + '_price'; // NEW LINE article.appendChild(article_title_label); article.appendChild(article_title_text); article.appendChild(article_textarea_label); article.appendChild(article_textarea); parent.appendChild(article); elCount++; } </script> <body> <div id="parent"> <div id="article_1"> <label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" /> <label for="article_1_price">Price: </label><input type="text" name="article_1_price" id="article_1_price" /> </div> </div> any ideas? Thanks Code: rownumber = 2; detailsTable = document.getElementsByName("detailsTable"); detailsRow = detailsTable.getElementsByTagName("tr")[rownumber]; name = detailsRow.getElementsbyTagName("td")[0]; address = detailsRow.getElementsbyTagName("td")[1]; address2 = detailsRow.getElementsbyTagName("td")[2]; phone = detailsRow.getElementsbyTagName("td")[3]; email = detailsRow.getElementsbyTagName("td")[4]; alert(name); I have been told if I want to get the text from each cell I can use: alert(name.firstChild.nodeValue); But I don't understand how to do this for what I am wanting to do. Here is my HTML: Code: <table border="0" name="detailsTable"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> Here is the Code of the Table Code: <table id="commentary" class="display commentary" width="100%"> <tr class="oversummary"><td colspan="2"> </td><td> End of over 1 (13 runs) - fubar(13-1). 155 runs required from 19 overs. RR 13.00 RRR 8.16 <br/>F. Amjad 10 (4b) , C. Dowe 3 (1b) , S. Hadad 1-0-13-1 </td></tr> I want a code by which Bold text can be seen on a new window by clicking on a link and that window refreshes after 30 seconds. 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 hey guyz. i have a string lets say Code: mywifidata = 'a1|a2|a3|a4|b1|b2|b3|b4|c1|c2|c3|c4|'; in the string there will always be an even amount of a,b,c data i would need to fill a table 'mytable' like this a1 b1 c1 a2 b2 c2 a3 b3 c3 a4 b4 c4 i am using the pipe symbol for the delimiter the actual data is wifi data like mywifiname1 on 70 mywifiname2 on 51 mywifiname3 off 57 mywifiname4 on 22 and to customise it i would like to replace the on and off with an image so if its on then <img src="padlock.png"> if off <img src="nolock.png"> and for the numeric values i would like a progressbar or something that would show the signal strength out of 70 also each wifiname td would need an id that increments like wifi1 wifi2 wifi3 wifi4 and each of those td will need an onclick="highlight(this.id)" i know i am being cheaky for asking all of this but i am willing to pay a few quid if someone could help me out hellow, i try to make a script that gets data from my mysql-database and displays it in a form with check boxes. if i select one or more check boxes the data with its checkbox should move to another column in the table in this form. all the other data and there checkboxes not selected should stay at its own place. in the future i want to work with 150 checkboxes. the part for getting it out off the database and display it in the form with the checkboxes is completed in PHP. but i'm stuck changing its place with the onclick handler from javascript. here you can see it working (but it's written when you click auto1 an click submit all the checkboxes change place and are selected) http://silent.comxa.com/m.php the code i have so far is: PHP Code: <? $ch11 = ''; $ch11 = $_POST['auto1']; $checked = isset($_POST['submit1']) && $_POST['auto1'] == 'on' ? 'checked="checked"' : ''; ?> </head> <body> <? @$cat=$_GET['cat']; if(strlen($cat) > 0 and !is_numeric($cat)){ echo "Data Error"; exit; } ///////// Getting the data from Mysql table ////////// $quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); ?> <form method="post" name="f2" action="m.php"><table width="828" border="1"> <?php while($noticia2 = mysql_fetch_array($quer2)) { if ($ch11 =='on'){ echo '<tr><td width="200" > </td><td width="300" > </td> <td width="200" > <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="100">'.$noticia2[cat_id].'</td></tr>'; } else { echo '<tr><td width="200" > <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="300" >'.$noticia2[cat_id].'</td><td width="200" > </td><td width="100" > </td></tr>';} } ?> </table> <?php echo '<input type="submit" name = "submit1" value="Submit"/>'; echo '</form>'; ?> I CANNOT GET THIS! I created a for loop to generate a specified number of input type fields onto the page within my form. The for loop will not work! to my knowledge all the code within the for loop is correct... please help me out! Here is all the code regarding this problem... 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=UTF-8" /> <title>History Countdown</title> <style> div#mainChart { display: none; } fieldset#main { padding: 20px 0 20px 20px; text-align: left; width: auto; min-width: 400px; } fieldset#moreInfo { padding: 20px 0 20px 20px; text-align: left; width: auto; min-width: 200px; margin: 20px; display: none; } table { margin: 0; padding: 0; } td { padding-right: 25px; } </style> <script> function enterData() { document.getElementById("moreInfo").style.display = "block"; var start = document.getElementById("startNumber").value; var end = document.getElementById("endNumber").value; var thisNumber = Math.abs(start - end); var dataFields = thisNumber + 1; alert(dataFields); setTimeout(makeFields, 500); function makeFields() { for (var i=1;i<=dataFields;i+=1){ var newNode = createElement("tr"); var newTD = createElement("td"); newTD.appendChild(document.createTextNode("Data for field " + i)); newNode.appendChild(newTD); document.getElementById("dataTable").appendChild(newNode); var newTD2 = createElement("td"); var newInput = createElement("input"); newInput.id = "data" + i; var attr1 = document.createAttribute("type"); attr1.nodeValue = "text"; newInput.setAttribute(attr1); newTD2.appendChild(newInput); newNode.appendChild(newTD2); document.getElementById("dataTable").appendChild(newNode); } } }//end makeFields function </script> </head> <body> <div id="wrapper"> <form name="dataForm" id="chartCreator"> <h1>Countdown Chart</h1><br /> <fieldset id="main"> <table> <legend>Chart Details</legend> <tr><td>Name of chart</td> <td><input name="countdownName" id="countDownName" type="text"></td> </tr> <tr><td>Start Countdown at...</td> <td><input name="BeginNumber" id="startNumber" type="text" value="1"></td> </tr> <tr><td>End Countdown at...</td> <td><input name="BeginNumber" id="endNumber" type="text" value="2011"></td> </tr> <tr><td><input type="button" value="Continue..." id="generateChart" onclick="enterData();" /></td> </tr> </table> <fieldset id="moreInfo"> <legend>Data</legend> <table id="dataTable"> <tr><td><input type="button" value="Create Chart!" id="generateChart" onclick="build();" /></td> </tr> </table> </fieldset> </fieldset> </form> </div> </body> </html> Hi, I am doing some custom development in Salesforce.com's Force.com platform. I have built a custom object (table) called "conferences" which has 2 fields named "Conference name" and "Number of attendees". I need to pass data from these fields to a Java Script Alert box. Can someone please help me out with the Javascript code I need to use to make this happen? Basically I need to know the method, procedure or function to use to pass data from the object (table) into the Javascript alert box. I am very new to Javascript. Thanks JayPS. Hi all, I have a code that will fetch out the data from database OnMouseOver. But it is working fine if don't add table on the div which will come OnMouseOver. If i try to show the fetched data in table then the code doesn't work. Please someone help me with this. Here is my code: Code: <script type="text/javascript" language="JavaScript"> var cX = 0; var cY = 0; var rX = 0; var rY = 0; function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;} function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;} if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; } else { document.onmousemove = UpdateCursorPosition; } function AssignPosition(d) { if(self.pageYOffset) { rX = self.pageXOffset; rY = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { rX = document.documentElement.scrollLeft; rY = document.documentElement.scrollTop; } else if (document.body) { rX = document.body.scrollLeft; rY = document.body.scrollTop; } if(document.all) { cX += rX; cY += rY; } d.style.left = (cX+10) + "px"; d.style.top = (cY+10) + "px"; } function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); dd.style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } var dd = document.getElementById(d); AssignPosition(dd); if(dd.style.display == "none") { dd.style.display = "block"; } else { dd.style.display = "none"; } } //--> </script> </head> <body> <table align="center" width="300px"/> <tr> <td>MakeID</td> <td>Make</td> <td>Veh Type</td> </tr> <?php $conn = mysql_connect ('localhost', 'root', ''); mysql_select_db ('my_db', $conn); function create_div($width, $height, $fields, $table, $w_field, $w_value, $unique) { $f = implode("`, `", $fields); $sql = "SELECT `$f` FROM `$table` WHERE `$w_field` = '$w_value'"; $res = mysql_query($sql) or die(mysql_error()); $div = "<div align=center id=\"data".$unique."\" style=\"display:none; position:absolute; border-style:solid; background-color:white; padding: 10px; width:".$width."px; height:".$height."px\" />\n"; $div .= '<table width="100%" cellpadding="4" cellspacing="2">'; $div .= '<tr><th>Serial</th><th>First Name</th><th>Email</th></tr>'; while($r = mysql_fetch_assoc($res)){ $div .= '<tr>'; $div .= '<td>'.$r['id'].'</td>'; $div .= '<td>'.$r['firstname'].'</td>'; $div .= '<td>'.$r['email'].'</td>'; $div .= "</tr>"; $div .= "</table>"; $div .= "</div>\n"; return $div; } $sql = "SELECT * FROM name"; $res = mysql_query($sql) or die(mysql_error()); $i=0; $fields = array("id", "firstname", "email"); while($r = mysql_fetch_assoc($res)){ echo create_div("300", "200", $fields, "admin", "id", $r['id'], $i); ?> <tr> <td><?php echo $r['id']; ?></td> <td><a onmouseover="ShowContent('data<?php echo $i; ?>'); return true;" onmouseout="HideContent('data<?php echo $i; ?>'); return true;" href="#"><?php echo $r['name'];?></a> </td> <td><?php echo $r['desc']; ?></td> </tr> <?php $i++; } ?> </table> </body> </html> Hi, I am new to javascript, Please help me with the issue below. My javascript code below should actually fetch the data from html table on button click. function displaymessage() { alert ("button pressed"); var table_cells = new Array(); var table7 = document.getElementById('Auth'); for (i=0,n=table7.rows.length; i < n ; i++) { var Rowdata = table7.rows[i]; table_cells[i] = new Array(); for(j=0,cols = Rowdata.cells.length; j < cols; j++) { table_cells[i,j] = Rowdata.cells[j].innerHTML; alert (table_cells[i,j]); } } alert (table_cells[1,1]); alert (table_cells[2,1]); alert (table_cells[3,1]); alert (table_cells[4,1]); alert (table_cells[5,1]); alert (table_cells[6,1]); alert (table_cells[7,1]); alert (table_cells[8,1]); } The problem with my code above is that the statement "alert (table_cells[i,j]);" executes properly and shows the correct value. But the other alert statements shows only the value of the last row of the table. i.e., my table has 9 rows. and all the alert statements shows 9th row's 2nd column's value outside the for loop. But inside the for loop it executes fine. I tried it in IE7. I seem to miss something. Could someone please help me out with this? Thanks in advance. Hey guys, I'm hoping this is possible or that there is an easier way to do this. I'm having an issue with displaying data from one array that contains information about users in a table that is controlled by a different array. Is it possible to do this or is this use of arrays to display the data the wrong approach? The table is located on one webpage, I simply want to extract one piece of information that I have placed in the initial array as part of the login script that contains user information (for validation for login etc) and display it in a table on the new webpage that is opened as a result of successful validation of the user details. I'm completely stumped and after many attempts I just can't seem to get it to work. Hi this is what I want to do. I have an online store and a need get fixed the machines from where my clients use my web site. what I'm doing right now is using an activeX to retrieve theirs OS code, HD serial number and other stuff and is working fine but since I'm using an ActiveX they are forced to use Internet Explorer and that's the big problem. my clients agree for me doing this check on their computers, actually they allow the activex to run, but they are requesting the posibility of using for example mozilla. thanks in advance and sorry about my english I'm just learning it is said that the 'form' node can be accessed by document.forms.certainName but it fails on my browser(IE8) however for images, it works, that is, document.images.certainName returns a Node. is there bugs only on 'form' tag? btw, document.forms[0] works ... quite quirky... Sup gents. Excuse my tenaciously novice questions, but dont disparage just yet, im beginning to grasp how the mechanism behind the code words, in due part to your helpful suggestions Im in the last stages of the code. In this section i have added three methods, whose function is to direct access control over the ciphers i will be adding shortly. I firstly need for the methods to be working. What they do is, categorize the set of values inside the first array and give a set of names privileges. The three methods that deal with the access control are link(), secondgroup() and third group. Ive assigned that the first three names( link() ) can access all the ciphers, ie administrators, the next three names ( secondgroup() ) can only access the shift, permutation and vigenere ciphers and the rest ( thirdgroup() ) can access the other remaining ciphers. But ive added so much code at once that i overwhelmed myself and i now i cant figure out where ive gone wrong, be it in the syntax or the logic Code: <html> <head> <script type ="text/JavaScript"> var counter = 0; var counter2 = 0; var arraynumb = 0; var arraynumb2 = 0; var global; var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil']; var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"]; function pass(){ var searchKey = document.searchform.inputVal.value; for (var i = 0, len = array.length; i < len; i++){ if (array[i] == searchKey){ counter = 1; arraynumb = i; } } } function pass1(){ var searchKey2 = document.searchform.inputVal2.value; for (var i = 0, len = array2.length; i < len; i++){ if (array2[i] == searchKey2){ counter2 = 1; arraynumb2 = i; } } } function access() { if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2) { window.alert("You may access the website"); global = 1; } else{ window.alert("You may not access the website"); global = 0; } } function link() { var searchKey3 = document.searchform.inputVal.value; if (global == 1 && (searchkey3 == array[0] || searchkey3 == array[1] || searchkey3 == array[2] )) { window.alert("You are an administrator, you may use all the ciphers"); } else window.alert("you are not signed in, please do so"); } function secondgroup() { var searchKey4 = document.searchform.inputVal.value; if (global == 1 && (searchkey4 == array[3] || searchkey4 == array[4] || searchkey4 == array[5] )) { window.alert("You are an ordinary user of class A, you may proceed to access the Shift, Vigenere and Permutation ciphers"); } else window.alert("You may not access this cipher"); } fucntion thirdgroup() { var searchKey5 = document.searchform.inputVal.value; if (global == 1 && (searchkey5 == array[6] || searchkey5 == array[7] || searchkey5 == array[8] || searchkey5 == array[9] )) { window.alert("You are an ordinary user of class B, you may proceed to access the Hill, Affine, Substitution and DES ciphers"); } else window.alert("You may not access this cipher"); } </script> </head> <body> <form name = "searchform" action = ""> <p>Enter username<br/> <input name = "inputVal" type = "text" size = "30"/> <input name = "search2" type = "button" value = "Search" onclick = "pass()"/> </p> <p>Enter password<br/> <input name = "inputVal2" type = "password" size = "30"/> <input name = "search" type = "button" value = "Search" onclick = "pass1()"/> <input name = "Access site" type = "button" value = "Access" onclick = "access()"/> <br/> <br/> <input name = "link to" type = "button" value = "Shift" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Vigenere" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Permutation" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Hill" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Affine" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Substitution" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Des" onclick = "link();return thirdgroup();" enabled=""/> <br/> </p> <br/> <p></p> </form> </body> </html> i noticed today that if i type in my js file name in the url i get a download box, i have an htaccess on my site so this should not be happening, thats another issue.. my question is, is there a trick to creating a js file that cant be accessed in this manner, i was thinking about adding a php define statement as it comes from one source only, but i wanted to ask first to see if there was something on the js side i could do or is that strictly a htaccess or server side issue.. hi, i want to make an ftp access page using javascript i know it's possible using "ftp://" , but when i use this, the browser loads a window with the ftp folder i want a javascript to get ftp access and to give the commands itself any1 who knows how to get ftp access and ability to give file send/receive/... commands with javascript? I'm trying to get the value of a radio button when clicked. I'm dynamically creating these radio buttons while populating a table like this: Code: var rad for(blah blah blah){ insert array data into table... insert array data into table... insert array data into table... rad = document.createElement('input'); rad.setAttribute('type', 'radio'); rad.setAttribute('name', 'options'); rad.setAttribute('value', id); rad.onclick = function() { doSomething() }; cell.appendChild(rad); } If I'm in the doSomething function, how do I access the value or ID of the radio button? Thanks! |