JavaScript - How To Reorder Tables That Are Stacked On Each Other?

I am trying to learn about the trace tables and truth tables in Javascript for the booleans. But I cannot seem to pick up the things. Does anyone know of a good resource where I can learn more?
Thanks in advance for any useful help with this.

Hey guys,

I ran into a problem designing my site. All is working, but this.


As you can see, the table on the right is not even with the table on the left. This code has worked in the past,
Code:

<script type="text/javascript">
window.onload = function () {
var divArray = document.getElementById('tablecontent').offsetHeight;
var subtraction = divArray - 442;
var tablesidebar = document.getElementById('tablesideba');
tablesidebar.style.paddingBottom = subtraction + 'px';
};
</script>

But that only works for a static page. The problem is now, both tables, the one on the left, and the one on the right, are dynamic. Either could have different heights depending on what page you are visiting. Different pages also have more than one table, and the only way I could see this working is with a million if statements or each page, defining each table being used. Is there anyway to get these two tables evened out, no matter the content using JavaScript?

Not really sure why this isn't working. I've mirrored this webpage from a friend's page - everything is literally identical, save for the references to the databases. His works, and mine doesn't. Here's an example of one of the tables I'm trying to sort:

http://www.iblhoops.net/modules.php?...isplay=ratings

The code in question for said table:

Code:

// BEGIN RATINGS TABLE

      $table_ratings="<table class=\"sortable\">
      <thead>
      <tr bgcolor=$color1><th><font color=$color2>Pos</font></th><th><font color=$color2>Player</font></th><th><font color=$color2>Age</font></th><th><font color=$color2>Sta</font></th><th><font color=$color2>2ga</font></th><th><font color=$color2>2g%</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>ft%</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>3g%</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>drb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>tvr</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>o-o</font></th><th><font color=$color2>d-o</font></th><th><font color=$color2>p-o</font></th><th><font color=$color2>t-o</font></th><th><font color=$color2>o-d</font></th><th><font color=$color2>d-d</font></th><th><font color=$color2>p-d</font></th><th><font color=$color2>t-d</font></th><th><font color=$color2>Foul</font></th><th><font color=$color2>Inj</font></th></tr>
</thead>
<tbody>
";

    $i=0;

    while ($i < $num)
    {

   if ($yr == "")
   {

    $name=mysql_result($result,$i,"name");
    $team=mysql_result($result,$i,"teamname");
    $pid=mysql_result($result,$i,"pid");
    $pos=mysql_result($result,$i,"altpos");
    $p_ord=mysql_result($result,$i,"ordinal");
    $age=mysql_result($result,$i,"age");
    $inj=mysql_result($result,$i,"injured");

    $r_2ga=mysql_result($result,$i,"r_fga");
    $r_2gp=mysql_result($result,$i,"r_fgp");
    $r_fta=mysql_result($result,$i,"r_fta");
    $r_ftp=mysql_result($result,$i,"r_ftp");
    $r_3ga=mysql_result($result,$i,"r_tga");
    $r_3gp=mysql_result($result,$i,"r_tgp");
    $r_orb=mysql_result($result,$i,"r_orb");
    $r_drb=mysql_result($result,$i,"r_drb");
    $r_ast=mysql_result($result,$i,"r_ast");
    $r_stl=mysql_result($result,$i,"r_stl");
    $r_blk=mysql_result($result,$i,"r_blk");
    $r_tvr=mysql_result($result,$i,"r_to");
    $r_sta=mysql_result($result,$i,"sta");
    $r_foul=mysql_result($result,$i,"r_foul");
    $r_totoff=mysql_result($result,$i,"oo")+mysql_result($result,$i,"do")+mysql_result($result,$i,"po")+mysql_result($result,$i,"to");
    $r_totdef=mysql_result($result,$i,"od")+mysql_result($result,$i,"dd")+mysql_result($result,$i,"pd")+mysql_result($result,$i,"td");
    $r_oo=mysql_result($result,$i,"oo");
    $r_do=mysql_result($result,$i,"do");
    $r_po=mysql_result($result,$i,"po");
    $r_to=mysql_result($result,$i,"to");
    $r_od=mysql_result($result,$i,"od");
    $r_dd=mysql_result($result,$i,"dd");
    $r_pd=mysql_result($result,$i,"pd");
    $r_td=mysql_result($result,$i,"td");
	$r_bird=mysql_result($result,$i,"bird");

$draftyear=mysql_result($result,$i,"draftyear");
$exp=mysql_result($result,$i,"exp");
$cy=mysql_result($result,$i,"cy");
$cyt=mysql_result($result,$i,"cyt");

	$yearoffreeagency=$draftyear+$exp+$cyt-$cy;

	} else {

     $name=mysql_result($result,$i,"name");
     $team=mysql_result($result,$i,"team");
     $pid=mysql_result($result,$i,"pid");

     $r_2ga=mysql_result($result,$i,"r_2ga");
     $r_2gp=mysql_result($result,$i,"r_2gp");
     $r_fta=mysql_result($result,$i,"r_fta");
     $r_ftp=mysql_result($result,$i,"r_ftp");
     $r_3ga=mysql_result($result,$i,"r_3ga");
     $r_3gp=mysql_result($result,$i,"r_3gp");
     $r_orb=mysql_result($result,$i,"r_orb");
     $r_drb=mysql_result($result,$i,"r_drb");
     $r_ast=mysql_result($result,$i,"r_ast");
     $r_stl=mysql_result($result,$i,"r_stl");
     $r_blk=mysql_result($result,$i,"r_blk");
     $r_tvr=mysql_result($result,$i,"r_tvr");
     $r_totoff=mysql_result($result,$i,"r_oo")+mysql_result($result,$i,"r_do")+mysql_result($result,$i,"r_po")+mysql_result($result,$i,"r_to");
     $r_totdef=mysql_result($result,$i,"r_od")+mysql_result($result,$i,"r_dd")+mysql_result($result,$i,"r_pd")+mysql_result($result,$i,"r_td");
     $r_oo=mysql_result($result,$i,"r_oo");
     $r_do=mysql_result($result,$i,"r_do");
     $r_po=mysql_result($result,$i,"r_po");
     $r_to=mysql_result($result,$i,"r_to");
     $r_od=mysql_result($result,$i,"r_od");
     $r_dd=mysql_result($result,$i,"r_dd");
     $r_pd=mysql_result($result,$i,"r_pd");
     $r_td=mysql_result($result,$i,"r_td");


	}

	if(($i % 2)==0) {
		$bgcolor="FFFFFF";
	}else{
		$bgcolor="EEEEEE";
	}

if ($tid == 0)
{
    $table_ratings=$table_ratings."      <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else {
if ($p_ord > 959)
{
    $table_ratings=$table_ratings."      <tr bgcolor=$bgcolor><td>$pos</td><td>(<a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name)*</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} elseif ($r_bird == 0) {
    $table_ratings=$table_ratings."      <tr bgcolor=$bgcolor><td>$pos</td><td><i><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</i></a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else if ($fayr == "" OR $yearoffreeagency == $fayr) {
   $table_ratings=$table_ratings."      <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
}
}

    $i++;

    }

$table_ratings=$table_ratings."
      </tbody>
    </table>
";

if ($tid != 0)
{

$table_totals=$table_totals."
      <table class=\"sortable\">
        <thead>
<tr bgcolor=$color1><th><font color=$color2>Pos</font></th><td colspan=3><font color=$color2>Player</font></th><th><font color=$color2>g</font></th><th><font color=$color2>gs</font></th><th><font color=$color2>min</font></th><th><font color=$color2>fgm</font></th><th><font color=$color2>fga</font></th><th><font color=$color2>ftm</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>3gm</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>reb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>to</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>pf</font></th><th><font color=$color2>pts</font></th></tr>
</thead>
<tbody>
";

Any ideas?

Hi,

I would just like to know how I would dynamically add another table once text fields in the existing table is clicked on.

So pretty much what I have is a table with 5 textboxes lined up horizontally in the first row along with couple of buttons in the second row.

What I want is that once one text box is clicked, another table like the one above is created and appears below that initial table.
So this is the inital table that should be replicated on each click:

Code:

<table>
		<tr>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" /></td>
			<td><input type="text" ></td>
		</tr>
		<tr>
			<td><button /></td>
			<td><button /></td>			
		</tr>


	</table>

How would I go about achieving this?

Thanks

Hi Guys,

I am posting this to see if anyone has any ideas or sample code that has worked in the past.

What i am aiming at doing is having two tables, with the same amount of rows side by side, effectively rendering them the same. I wish then to select a row on the one table, and this event would trigger the same row on the 2nd table to be selected too.

Has anyone done something like this before?

Appreciate any feedback!

Thanks.

http://74.220.207.105/~torasmos/shiurim/testsort.html

this works in firefox but in ie I get an error
Webpage error details


Message: 'this.className' is null or not an object
Line: 94
Char: 11
Code: 0
URI: http://74.220.207.105/~torasmos/shiurim/sorttable.js

I am using the script from
http://www.kryogenix.org/code/browser/sorttable/

does anyone have any idea what the issue is?

How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?

Hi im using this php code right here for a search function that opens url's in an iframe PHP Code:
$text = $_POST['text'];
switch($_POST['engine']) {
case 1:
      for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } }
      $data = "http://www.yahoo.com".$text;
      break;
case 2:
      $data = "http://www.google.com".$text;
      break; 


Code:

<FORM name="search" ACTION='search.php' METHOD='POST' target="frame">
				   <input TYPE='text' NAME="text" id="text" class="search" /> 
					   &nbsp;<font face="verdana">
					   <input type='submit' name="submit" value="Go" class="button" /><br />
					   Select Engine: </font><br />
					   <select name="engine" size="26">
                              
                              <option value="1">yahoo</option>
					                                <option value="2">google</option>
</select>
</form>

what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this?

Hi,
I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me.
Thank You.

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>

Hello again everyone.
I got this bit of code from "rnd me" and I guess I'm not as smart as I thought I was, because I was hoping to look at this code and figure out how to modify it to allow for nested Tables to be created but everything I try seems to make me scratch my head so I'm starting with the given code and hoping to get some help (again)

Also on my prev post I can't get it to list as resolved


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>
	<title>table maker</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  


<table id="tab">
<tr id="i">
<td>hello world</td>
</tr>
</table>

  
<script type='text/javascript'>
  
var t=document.getElementById("tab"), //find table object
 base=document.createElement("tr");  //create template row
 base.appendChild(document.createElement("td")); //add a cell to template

for (var i=1; i<10; i++){
   var row=base.cloneNode(true); //dupe template
   row.id="row"+i;   //assign id attrib using i and row prefix
   t.appendChild(row); //add new row to the table
   row.cells[0].innerHTML=Array(7).join(i);//insert dummy content
}//next i

</script>
</body>
</html>

I encountered an error when my table had only one or zero records when using the filtertable library from javascriptkit.com Here is the solution to fixing it for anyone else who encountered it. Perhaps the library could be updated with the fix?

The error is in the function getChildElms() when the variable 'n' is undefined. Working backwards, I found that there was a problem with some logic in the setFilterGrid() function where the value of 'ref_row' is changed if undefined to a value of '2'. In fact, that value is needed in the line to set the value of tbl.tf_ref_row, but accidentally caused a problem in the call to getCellsNb() where at some point it tries to get at row 2 (offset 3) which doesn't exist in my case. I fixed it by creating a new variable and leaving it as 'undefined' unless ref_row contained a number (passed into the function).

This is a section of the function with the fix:

Code:

		var _row;
		if(ref_row == undefined){
			ref_row=2;
		} else {
			 ref_row=(ref_row+2);
			 _row = ref_row;
		}
		var ncells = getCellsNb(id,_row);
		tbl.tf_ncells = ncells;
		if(tbl.tf_ref_row==undefined) tbl.tf_ref_row = ref_row;
		tbl.tf_Obj = fObj;
		if( !hasGrid(id) ) AddGrid(id);

However, if you have zero rows, you still get an error since there are no tr elements. I fixed this by having the code use the th elements instead when zero tr elements are found. This code is in the function 'getCellsNb()' below:

Code:

{
  	var t = grabEBI(id);
	var tr;
	if(nrow == undefined){
		tr = grabTag(t,"tr")[0];
	}
	else {
	 tr = grabTag(t,"tr")[nrow];
	}
	var n = getChildElms(tr);
	if (!n){
		n = getChildElms(th);  // Check for 'th' elements instead.
		return n.childNodes.length;
	}
	return n.childNodes.length;
}

If you have no data rows and no header row, then you're on your own :)

Hi

I'm using quick search plugin (www.dynamicdrive.com) in filtering rows in a group of tables.

The problem is that the old vesion of Quick search may act on multiple tables as long they have the same table_id while the new vesion acts on the first table only.

Is there a way to solve this problem?

N.B.
1-the number of tables is very large (in some pages may be 500 tables).
2-the action of Quick search is applied automaticaly as the user type any text in the input text box. so i don't know any way to make a loop to call the function once for each table.

Thanks for your help.