|
JavaScript - Collapsable Table Problem
Hey so I have some javascript and CSS code and I can't figure out where the problem is.
Javascript (and a little HTML) Code: <script type="text/javascript">
var rowVisible = false;
function toggleDisplay(tbl)
{
var tblRows = tbl.rows;
for (i = 0; i < tblRows.length; i++)
{
if (tblRows[i].className != "headerRow")
{
tblRows[i].style.display = (rowVisible) ? "none" : "table-row";
}
}
rowVisible = !rowVisible;
}
</script>
<table id="theTable" width="100%" border="0">
<tr class="headerRow">
<td><div align="center">
<h1>Software </h1>
</div></td>
</tr>
<tr class="headerRow">
<td><h3 onmouseover="style.fontWeight = 'bold'" onmouseout="style.fontWeight = 'normal'" onclick="toggleDisplay(document.getElementById('theTable'))">Norton Antivirus Endpoint Protection</h3></td>
</tr>
CSS Code: table#theTable tr {
display:none;
}
table#theTable tr.headerRow {
display:table-row;
}
Now what it's supposed to do, and actually does do, is when you click on the tr.header-row element, it opens up the cell beneath it. My problem I'd like to figure out is why I have to click twice to enable a different header. For instance, if I click on a header, it'll open up just fine. But the moment I go to click on a different header, I have to click twice before it opens up. It's like the first click shifts focus then the second click activates the display code or something. Does anyone see anything that would cause this? Or maybe some code I'm missing to fix it? I'd like the user to be able to click on any one of them and have it open on the first click. I don't care how many are open at a time, I just don't want them to have to click more than once to open up the information. Thanks! -Kaze- Similar TutorialsPlease see the design. I want that when user click on "Vyrobce" on top this change design chage according to the design. To see the code please visit this link: http:// jordanek.eu/aktual/index6 dot html Please help me to fix it. Thank you. N.B. I use boostrap collapse javascript function for this section: http:// getbootstrap dot com/javascript/#collapse Hello, I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB. I have the code below that gives the ability to open and collapse sections. I don't know too much javascript and found this code online. I tweaked it to serve my purposes but it doesn't do one thing. I would like all of the areas to be collapsed when the page is opened. How would I tweak the code below to do that? 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>Untitled Page</title>
<script type="text/javascript">
function ExpandCollapseTable1(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable2(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable3(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
function ExpandCollapseTable4(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
</script>
</head>
<body>
<table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=red>
<tr onclick="ExpandCollapseTable1(this);" style='cursor:pointer;'>
<td> I</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightgreen>
<tr onclick="ExpandCollapseTable2(this);" style='cursor:pointer;'>
<td> A</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=yellow>
<tr onclick="ExpandCollapseTable3(this);" style='cursor:pointer;'>
<td> i</td>
</tr>
<tr>
<td><table border='0' bordercolor='#000000' width='100%' cellspacing='0' cellpadding='0' bgcolor=lightblue>
<tr onclick="ExpandCollapseTable4(this);" style='cursor:pointer;'>
<td> a</td>
</tr>
<tr>
<td bgcolor=orange> CONTENT CONTENT CONTENT</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
FYI, I've also posted this question at: http://www.tek-tips.com/submitpost.cfm?pid=216 http://www.webdeveloper.com/forum/sh...60#post1106660 Hey guys my question is related to sort table This is the code for the table: PHP Code: $result = $conn->query("SELECT query, link, pro,pro_update,ana,ana_update,cell,cell_update,cellother,cellother_update,gen,gen_update,genother,genother_update,author,author_update,other,other_update,date,id FROM mailing_list WHERE email = '$email' ORDER BY $order LIMIT $start_row, $max_per_page;"); echo "<table class=\"sortable\" id=\"query_quick2\" width=\"100%\" >\r\n"; echo "\t<tr><th class=\"sorttable_alpha\" >Updated Query</th><th width=\"10\" class=\"sorttable_alpha\" >Link</th> <th class=\"sorttable_alpha\" >Promoter Locus</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Anatomical Area</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Cell Type</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Other Cell Type</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Genetic Background</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Other Gen. Back.</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Author</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_alpha\" >Other</th><th class=\"sorttable_alpha\" >Update</th> <th class=\"sorttable_mmdd\" >Date</th><th class=\"sorttable_nosort\" ></th><th class=\"sorttable_nosort\" ></th>\r\n"; if($result->num_rows){ while ($row = $result->fetch_array()){ $RowCount ++; $row_color = ($RowCount % 2) ? $color1 : $color2; echo "<form method = \"post\" action=\"{$_SERVER['PHP_SELF']}\">"; echo "\t<tr id=\"{$row['id']}\" class=\"$row_color\" > <td>{$row['query']}</td><td>{$row['link']}</td> <td>{$row['pro']}</td><td>{$row['pro_update']}</td><td>{$row['ana']}</td> <td>{$row['ana_update']}</td><td>{$row['cell']}</td><td>{$row['cell_update']}</td><td>{$row['cellother']}</td> <td>{$row['cellother_update']}</td><td>{$row['gen']}</td><td>{$row['gen_update']}</td><td>{$row['genother']}</td> <td>{$row['genother_update']}</td><td>{$row['author']}</td><td>{$row['author_update']}</td><td>{$row['other']}</td><td>{$row['other_update']}</td> <td>{$row['date']}</td> <td><input type=\"submit\" name=\"edit_mail\" value = \"Edit\"/></td> <td><input type =\"hidden\" name = \"id\" value=\"{$row['id']}\"/></td> <td><input type=\"submit\" name=\"delete_mail\" value =\"Delete\"/></td> </tr>"; echo "</form>"; } } echo "</table>"; This is an excerpt of the script which deletes the specific entry: PHP Code: } elseif(isset($_SESSION['user_id']) AND isset($_POST['delete_mail'])){ //user is deleting existing queries $connect=db_connect_2(); $id = mysqli_real_escape_string($connect, $_POST['id']); $sql2 = "DELETE FROM mailing_list WHERE id='$id'"; $result = mysqli_query($connect, $sql2) or mysqli_error($conn); $msgs[] = "Queries DELETED successfully."; $body = "account.php"; } I can delete the specific entry like usual at the beginning but right AFTER i sort the table by clicking a column heading, say, promoter locus, (using sortable.js) and then when i try to delete a specific entry, problem arises. Instead of deleting the entry i want, it always deletes the LAST entry. Now as you can see, i select a specific value for $id, using post method from a form But shouldn't the value of $id point to the entry i want to delete when i click the "delete" button near it? (i mean it works fine before i sort the table) Any help would be greatly appreciated Thanks. hi I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased. it sum but not like integer for ex. in row1 i enter 20 and in row2 i enter 5 it sums like 205 but i need it sums like 25 if possible pls help me Thanks beforehand here is code Code: <html>
<head>
<title></title>
<script type="text/javascript">
function addRow()
{
// grab the element, i.e. the table your editing, in this we're calling it
// 'mySampleTable' and it is reffered to in the table further down on the page
// with a unique of id of you guessed it, 'mySampleTable'
var tbl = document.getElementById('mySampleTable');
// grab how many rows are in the table
var lastRow = tbl.rows.length;
// if there's no header row in the table (there should be, code at least one
//manually!), then iteration = lastRow + 1
var iteration = lastRow;
// creates a new row
var row = tbl.insertRow(lastRow);
// left cell
// insert a cell
var cellLeft = row.insertCell(0);
// here we're just using numbering the cell, like anything else you don't
// have to use this, but i've kinda noticed users tend to like them
var textNode = document.createTextNode(iteration);
// takes what we did (create the plain text number) and appends it the cell
// we created in the row we created. NEAT!
cellLeft.appendChild(textNode);
// right cell
// another cell!
var cellRight = row.insertCell(1);
// creating an element this time, specifically an input
var el = document.createElement('input');
// a data type of text
el.type = 'text';
// the name of the element txtRow, and because this is dynamic we also
// append the row number to it, so for example if this is the eigth row
// being created the text box will have the name of txtRow8. super fantastic.
el.name = 'txtRow' + iteration;
// the exact same thing with a unique id
el.id = 'txtRow' + iteration;
// set it to size of 40. setting sizes is good.
el.size = 40;
el.rel = 'sum';
// same thing as earlier, append our element to our freshly and clean cell
cellRight.appendChild(el);
// select cell
// our last cell!
var cellRightSel = row.insertCell(2);
// create another element, this time a select box
var sel = document.createElement('select');
// name it, once again with an iteration (selRow8 using the example above)
sel.name = 'selRow' + iteration;
// crates options in an array
// the Option() function takes the first parameter of what is being displayed
// from within the drop down, and the second parameter of the value it is carrying over
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
sel.options[2] = new Option('text two', 'value2');
// append our new element containing new options to our new cell
cellRightSel.appendChild(sel);
}
function removeRow()
{
// grab the element again!
var tbl = document.getElementById('mySampleTable');
// grab the length!
var lastRow = tbl.rows.length;
// delete the last row if there is more than one row!
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<script type="text/javascript">
function sum() {
var elem = document.getElementById('eval_edit').elements;
// loop fields in form
for (var i = 0; i < elem.length; i++) {
// check if field has attribute 'rel' with value of 'sum'
if (elem[i].getAttribute('rel') == 'sum') {
// parse value as integer and copy to total field
document.getElementById('total').value += parseInt(elem[i].value);
}
}
}
</script>
</head>
<body>
<form action="miro.html" name="eval_edit" method="post" format="html">
<table align="center" width = "75%">
<tr>
<td align = "center">
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
</td>
</tr>
<tr>
<td align = "center">
<!--- very imporant to give the table an id --->
<!--- otherwise it won't know where to edit --->
<table border="1" id="mySampleTable">
<tr>
<td>
Lesson
</td>
<td>
Title
</td>
<td>
Instructor
</td>
</tr>
<!--- i create the initial row by hand, there are a lot of --->
<!--- different ways to do this depending on what parsing --->
<!--- language you use, i found this was easiest for the --->
<!--- snippet, but experiment, do your thing mang. --->
<!--- this matches the same specs we laid out in the javascript --->
<tr>
<td>
1
</td>
<td>
<input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
<option value="value2">text two</option>
</select>
</td>
</tr>
</table>
<input name="total" />
<!--- our buttons call our javascript functions when clicked --->
<input type="button" value="Add" onclick="addRow();" />
<input type="button" value="Remove" onclick="removeRow();" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
have created dynamic table with two columns for ex:first column is Income column and second column is tax from Income at the third column are different percent options for ex. I wrote first column 1000 and chose from third drop down box 10% I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100 here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users thanks beforehand here si code Code: <html><head><title>dinamik sheet</title>
<script>
function addrow(){
var tbl=document.getElementById('sheet');
var lastrow=tbl.rows.length;
var iteration=lastrow;
var row=tbl.insertRow(lastrow);
var cellLeft=row.insertCell(0);
var textNode=document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight=row.insertCell(1);
var el=document.createElement('input');
el.type='text';
el.name='txtRow'+iteration;
el.size=40;
el.setAttribute('sumMe',"1");
el.onBlur=sum;
cellRight.appendChild(el);
var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='txtRowe'+iteration;
el1.size=40;
el1.setAttribute('sumMe',"1");
cellRight2.appendChild(el1);
var cellRightsel=row.insertCell(3);
var sel=document.createElement('select');
sel.name='selRow'+iteration;
sel.options[0]=new Option('10%','value="10"');
sel.options[1]=new Option('20%','value="20"');
sel.options[2]=new Option('30%','value="30"');
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);
}
</script>
<script>
function sum(){
var form=document.getElementById('eval_edit');
if(!form) return;
var s1 = 0;
var s2 = 0;
var tbl=document.getElementById('sheet');
var iteration=tbl.rows.length-1;
for(var i=1; i<=iteration; i++){
var el = form['txtRow'+i];
if(!el) continue;
var txt = el.value;
if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
var el2 = form['selRow'+i];
var el3 = document.getElementById('txtRowe'+i);
if(!el2 || !el3) alert('Error in calculating totals');
var percent = Number(el2[el2.selectedIndex].value)/100;
var tax = Number(txt) * percent;
el3.innerHTML = tax.toFixed(2);
s1 += Number(txt);
s2 += tax;
}
if(form['total']){ form['total'].value = s1.toFixed(2); }
if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}
onload = function(){
sum();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value="10">10%</option>
<option value="value="20">20%</option>
<option value="value="30">30%</option></select></td></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRow()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td>
</tr>
</table>
</form>
</body>
</html>
I have a table with red and green cells...what I want to do is collapse rows with ALL green cells and show every other... My code right now runs into a problem when there are both red and green cells in a row...It shifts the red cells to the left... Code: <html>
<head>
<style type="text/css">
.green{ background:green;display:none;}
.red{ background:red;}
</style>
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("toggleMe").style.display = "";
if(document.getElementById("toggleMe").style.visibility == "hidden" ) {
document.getElementById("toggleMe").style.visibility = "visible";
}
else {
document.getElementById("toggleMe").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<table id='theTable' border=2>
<tr>
<th>col0</th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
</tr>
<tr>
<td><a href="#" id="showgreen">Uncollapse</a></td>
<td class="green">1</td>
<td class="green">9</td>
<td class="green">20</td>
<td class="red">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr id="toggleMe">
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="green">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
<td class="red">NOT FOUND</td>
<td class="red">Unknown! (65535)</td>
<td class="red">NOT FOUND</td>
</tr>
<tr>
<td></td>
<td class="green">13045029.1</td>
<td class="green">23</td>
<td class="green">42</td>
<td class="green">13045029.1</td>
<td class="green">9</td>
<td class="green">20</td>
</tr>
</table>
<a href="#" id="showred">Toggle Errors</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$("#showgreen").click(function(){
$('.green').toggle();
});
$("#showred").click(function(){
$('.red').toggle();
});
</script>
<p><button onclick="toggleVisibility()">toggle</button></p>
</body>
</html>
How can i preserve the cell position as well? I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding Code: <input type="button" value="GO" name="proj_list" /> But here is the whole index page Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2009 Events</title>
<link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="../css/sortable.css" />
<link rel="stylesheet" type="text/css" href="../css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" />
<script type="text/javascript" src="../includes/datepicker.js"></script>
<script language="javascript" src="../includes/tablesort.js"></script>
<script language="javascript" src="../includes/tableActions.js"></script>
<script language="javascript" src="../includes/chrome.js"></script>
<script language="javascript" src="../includes/ajaxtabs.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<?php include("../header.php"); ?>
</div>
<div id="navbar2">
<?php include("../menu.php"); ?>
</div>
<div id="content">
<div id="breadcrumb">
<script language="javascript" src="../includes/breadcrumbs.js"></script>
</div>
<?php
// If the user wants to add a project
if (isset($addproject)):
else:
$dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx");
if (!$dbcnx) {
echo( "<P>Unable to connect to the xxxxxxxxx" .
"database server at this time.</P>" );
exit();
}
mysql_select_db("techweb", $dbcnx);
if (! @mysql_select_db("techweb") ) {
echo( "<P>Unable to connect to the xxxxxxx" .
"database at this time.</P>" );
exit();
}
// If a project has been submitted,
// add it to the database.
if ("SUBMIT" == $proj_submit) {
$sql = "INSERT INTO projects SET " .
"proj_priority='$priority', " .
"proj_title='$title', " .
"proj_bdlead='$bdlead', " .
"proj_englead='$englead', " .
"proj_objective='$objective', " .
"proj_capability='$capability', " .
"proj_approach='$approach', " .
"proj_venue='$venue', " .
"proj_tradeshow='$tradeshow', " .
"proj_funding='$funding', " .
"proj_src-ds='$src-ds', " .
"proj_src-cap='$src-cap', " .
"proj_src-irad='$src-irad', " .
"proj_status='$status', " ;
if (mysql_query($sql)) {
echo("<P>Your project has been added.</P>");
} else {
echo("<P>Error adding submitted project: " .
mysql_error() . "</P>");
}
}
echo("<h1 style='text-align:left'> 2009 Projects </h1>");
// Request the text of all the projects
$result = mysql_query(
"SELECT * FROM projects");
if (!$result) {
echo("<P>Error performing query: " .
mysql_error() . "</P>");
exit();
}
?>
<form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" value="GO" name="proj_list" />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
hello, can anyone help me with a javascript-php-ajax problem? I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function: $(document).ready(function() { $("#checkall").live('click',function(event){ $('input:checkbox:not(#checkall)').attr('checked',this.checked); //To Highlight if ($(this).attr("checked") == true) { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01"); } else { //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff"); $("#policy").find('tr:not(#chkrow)').css("background-color","#FFF"); $("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3"); } }); $('input:checkbox:not(#checkall)').live('click',function(event) { if($("#checkall").attr('checked') == true && this.checked == false) { $("#checkall").attr('checked',false); $(this).closest('tr').css("background-color","#ffffff"); } if(this.checked == true) { $(this).closest('tr').css("background-color","#FC9A01"); CheckSelectAll(); } if(this.checked == false) { $(this).closest('tr').css("background-color","#ffffff"); $(this).closest('tr.alt').css("background-color","#EAF2D3"); } }); function CheckSelectAll() { var flag = true; $('input:checkbox:not(#checkall)').each(function() { if(this.checked == false) flag = false; }); $("#checkall").attr('checked',flag); } }); I have a table with tabs on it that calls different php files once the tab is clicked and on top of the table I have a drop list and a button. the whole table has 5 tabs and in there are 15 unique id with information on each tab that the table show when you click on the tab. The drop down list is a selection that you choose from of each of the 15 unique IDs. Once you choose one then click the button you should then only see that specific information about that particular id. (It can be in the table where you click each tab or all of it on one page I dont care.) So I need to get this button to work. I am very unfamiliar with buttons (thats why I am posting this) and I hope someone can help me Code: <form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" VALUE="GO"
onClick=location("****Do not know what to put here******) />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
I'm almost finished with this app for XUL / HTML Table Generation, and i have a really strange problem... The HTML strings in the Arrays can be changed, and the HTML file saved, and the HTML page reloaded, and the changes will render. However, i have one array, no matter what i change the HTML strings to, it refuses to render the changes made to the HTML strings. It's quite confusing... the array in question is Code: // Humidor InnerHTML
HumidorInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[1] = "<input type='textbox' id='Others_Caption" + HumidorIndex + "'>";
HumidorInnerHTML[2] = "<input type='textbox' value='85' id='Others_Height" + HumidorIndex +"'>";
HumidorInnerHTML[3] = "<input type='textbox' value='85' id='Others_Width" + HumidorIndex +"'>";
HumidorInnerHTML[4] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[5] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
HumidorInnerHTML[6] = "<img src='delete.png' onClick=DeleteRow('" + HumidorIndex + "','Humidor_Table');>";
HumidorInnerHTML[7] = "<img src='add.png' onClick=AddRow('" + HumidorIndex + "','Humidor_Table');>";
and the function that generates the HTML Table on the fly (and adds the cell data to them) is he Code: function AddRow(index, DIV)
{
MyTable = document.getElementById(DIV);
var newCell;
var newRow = MyTable.insertRow(index);
var Length;
switch (DIV)
{
case "Intro_Table" : Length = IntroInnerHTML.length;
break;
case "Image_Table" : Length = ImageInnerHTML.length;
break;
case "Watch_Table" : Length = WatchInnerHTML.length;
break;
case "Others_Table" : Length = OthersInnerHTML.length;
break;
case "Humidor_Table" : Length = HumidorInnerHTML.length;
break;
}
for (var i = 0; i < Length; i++)
{
newCell = newRow.insertCell(i);
switch (DIV)
{
case "Intro_Table": newCell.innerHTML = IntroInnerHTML[i];
break;
case "Image_Table": newCell.innerHTML = ImageInnerHTML[i];
break;
case "Watch_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
case "Others_Table": newCell.innerHTML = OthersInnerHTML[i];
break;
case "Humidor_Table": newCell.innerHTML = WatchInnerHTML[i];
break;
}
}
// Update the Index Counters
switch (DIV)
{
case "Intro_Table": IntroIndex++;
break;
case "Image_Table": ImageIndex++;
break;
case "Watch_Table": WatchIndex++;
break;
case "Others_Table": OthersIndex++;
break;
case "Humidor_Table": HumidorIndex++;
break;
}
}
when the page is loaded, the Init() function is started, that code is he Code: function Init()
{
AddRow(1, "Intro_Table");
AddRow(1, "Image_Table");
AddRow(1, "Watch_Table");
AddRow(1, "Humidor_Table");
AddRow(1, "Others_Table");
}
Did i miss something? there must be something i've over looking. I have even tried isolating some other external JS, and CSS includes that i have, and isolating them has no change in the result. the html file is live he http://kevinjohnson.clanteam.com/XML...anageSite.html thanks 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. please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"< I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program. In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px. Please help me~~T_T Code: <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
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 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. I've tried using this to do it, but it isn't working... string.replace(/(<table([^>]+)table>)/ig,""); |
|||||||