JavaScript - Need Help Filling A Table With Deliminated Data

Hi to everyone,

I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list.

But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists.

This is how it would looks like :

Machine-Name : __________ (empty text field)

Drop-List1 : abc (the user selected the string "abc" from the list.)

Machine-Name : abc-

Drop-List 2 : zxy(the user selected the string "zxy" from the list.)

Machine-Name : abc-zxy-


I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial.

So, in words, how would you guys proceed to achieve this goal?

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">&nbsp;</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.

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>

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

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" >&nbsp;</td><td width="300" >&nbsp;</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" >&nbsp;</td><td width="100" >&nbsp;</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.

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.

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 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>&nbsp;</p>
    <p>&nbsp;</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>

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>