JavaScript - Get Table Row Data From Row
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> Similar TutorialsHere 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. 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 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 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> 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> 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>'; ?> 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. 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 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. 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. My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript"> addLoadEvent(function() { function1(1); }) //function1 makes the table rows do something appearance wise. </script> <tr> <td></td> <td></td> <td> <img src="pics/delete.png" alt="Delete" onclick="function2();"> </td> </tr> I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. hi guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code: <script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script> <script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script> <script type="text/javascript"/> $(document).ready(function() { $("#myTable").tablesorter(); } ); </script> <form id="form1" name="form1" method="post" action=""> <label for="Position">Position</label> <select name="Position" id="Position"> <option>QB</option> <option>HB</option> <option>FB</option> <option>WR</option> <option>TE</option> <option>RG</option> <option>RT</option> <option>C</option> <option>LG</option> <option>LT</option> <option>CB</option> <option>LB</option> <option>SS</option> <option>FS</option> <option>DE</option> <option>DT</option> <option>P</option> <option>K</option> </select> <input type="submit" name="Summit" id="Summit" value="Submit" /> </form> <p> </p> <p> </p> <table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable"> <thead> <tr> <th bgcolor="#FF0000">id</th> <th bgcolor="#FF0000">Team</th> <th bgcolor="#FF0000">FirstName</th> <th bgcolor="#FF0000">LastName</th> <th bgcolor="#FF0000">Position</th> <th bgcolor="#FF0000">Year</th> <th bgcolor="#FF0000">Overall</th> <th bgcolor="#FF0000">Speed</th> </tr> </thead> <?php do { ?> <tbody> <tr> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td> <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td> </tr> </tbody> <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?> </table> Hello all i have to implement simple LIFO algorithm ( if i can call it like this .. ) say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table for example : im fetching the string "111" so it will be the first record next im fetching the string "222" now the string "111" will be the second and the string "222" will be the first .. and so on hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function reformatMe() { var divObj = document.getElementById('reformatMe'); var numRows = document.getElementsByTagName("tr"); var z = "1"; for (i = 0; i < numRows.length; i++) { if (numRows[i].childNodes[0].innerHTML == "2") { var markStart = numRows[i]; alert(markStart.nextSibling); var closeTable = document.createElement("/table"); var addTable = document.createElement("table"); //var tbody = document.createElement("tbody"); //addTable.appendChild(tbody); addTable.setAttribute("id", "subOptionID" + z); if(numRows[i+1] != null){ numRows[i].parentNode.insertBefore(addTable, numRows[i+1]); } z++; } } alert(divObj.innerHTML); } </script> </head> <body> <a href="#" onclick="reformatMe();">reformat table</a> <div id="reformatMe"> <table border="1" cellpadding="4" cellspacing="2" id="menuItemID1"> <tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr> <tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr> <tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr> <tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr> </table> </div> </body> </html> I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists. The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect. My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front. Here is what I am trying: Code: $('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000); I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work. When I try: Code: $('tr:has(td:contains(' + subject + '))').fadeOut(1000); the whole page disappears, so I think I may be close. Thank you in advance for any assistance. Hi, I have a div "bigPicture" which contains an image of Thai food. Image can change based on a users onclick of thumbnails. Each image as it passes through div "bigPicture" needs to have the values: price, description and Date,Time associated with it. How do I assign those values and use them later in a Shopping Cart environment. I have tried getelementbyId.innerHTML using alert to see what I can get but it is too much information. website address is http://www.kohchangbookingandinforma.../ATT/index.asp Thanks for your consideration Robby Hi guys, I'm trying to run this sample file that i got from the google docs. I want to write a stock ticker from google finances xml feed and this is a sample they had. Code: <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hellofinance"> <Require feature="finance"/> </ModulePrefs> <Content type="html"> <![CDATA[ Hello world! Here is your portfolio:<br/> GOOG: <span id=_IG_SYM1_l></span> (<span id=_IG_SYM1_c></span>)<br/> AAPL: <span id=_IG_SYM2_l></span> (<span id=_IG_SYM2_c></span>)<br/> INTC: <span id=_IG_SYM3_l></span> (<span id=_IG_SYM3_c></span>)<br/> <script> var quote = new google.finance.Quote(); quote.enableDomUpdates( { 'GOOG' : '_IG_SYM1', 'AAPL' : '_IG_SYM2', 'INTC' : '_IG_SYM3' } ); quote.getQuotes(["GOOG", "AAPL", "INTC"]); </script> ]]> </Content> </Module> my problem is i don't know how to execute it so i can see how it works. I tried sticking this code within a php file and it returns an error on the first line for unexpected t-string. So i tried changing the extension to xml and it just displays the code but does not execute. I'm stumped. Any help is appreciated. Thanks P.S. - Yes i do have the zend gdata framework installed and running on my server and is working correctly according to their test. Anyone that can help on this one it would be greatly appreciated... I need to make a form parses a result from column 1 of txt/csv file that has 7 columns. Column 1 is pay, column 2-7 are how many and the associated rows are the answers. In short 1 2 3 4 5 6 700 50 55 62 75 80 99 so if the customer enters i make 700 and i need 2 the result would be 55 as the output. Any idea on how to make that work with javascript? if (pay <=700 && widgets = 2) { document.write(55) elseif (pay <=700 && widgets = 1) document.write(50) is this doable and is it the easiest way to accomplish this? Html Code Code: <div id="itemStockUnit"> Qty <input type="text" size="2" value="1" class="quantity"> <select id="stockUnit" style="width:100%"> <option rel="Window1;7-10;153.00;140.24;">615W x 705H (mm)</option> <option rel="Windows2;7-10;187.00;171.09;">625W x 745H (mm)</option> <b>Delivery:</b> <span id="itemDeliveryTime">7-10</span> days <br> <small><b>RRP:</b> £<span id="itemRRPPrice">153.00</span></small> <br> <b>Our Price: <span id="itemOurPrice">£140.24</span></b> </div> JavaScript Code: <script type="text/javascript"> google.setOnLoadCallback(function() { $("#stockUnit").change(function(){ var data = ($("option:selected",this).attr("rel")).split(";"); $("#itemDeliveryTime").fadeOut().html(data[1]).fadeIn(); $("#itemRRPPrice").fadeOut().html(data[2]).fadeIn(); $("#itemOurPrice").fadeOut().html(data[3]).fadeIn(); }); }); </script> I have set data types to each option however the javascript above doesnt make it change any help? |