|
JavaScript - I Need To Display A Summary Table
Can someone show me how to get the summary box to the top right position under The Lighthouse address and align with the Date, Amount, etc box? Here is what I got.
<title>The Lighthouse</title> <link href="lhouse.css" rel="stylesheet" type="text/css" /> <script src="list.js" type="text/javascript"></script> <script type="text/javascript"> function amountTotal() { var total = 0; for (var i=0; i < 35; i++) { total=amount[i]+total; } return total; } </script> </head> <body> <div id="title"> <img src="logo.jpg" alt="The Lighthouse" /> The Lighthouse<br /> 543 Oak Street<br /> Delphi, KY 89011<br/> (542) 555-7511 </div> <div id="data_list"> <script type="text/javascript"> document.write("<table border='1' rules='rows' cellspacing='0'>"); document.write("<tr>"); document.write("<th>Date</th><th>Amount</th><th>First Name"); document.write("</th><th>Last Name</th><th>Address</th>"); document.write("</tr>"); for (var j=0; j<35; j++) { if (j % 2 == 0) { document.write("<tr>"); } else { document.write("<tr class='yellowrow'>"); } document.write("<td>"+date[j]+"</td>"); document.write("<td class='amt'>"+amount[j]+"</td>"); document.write("<td>"+firstName[j]+"</td>"); document.write("<td>"+lastName[j]+"</td>"); document.write("<td>"+street[j]+"<br />"); document.write(city[j]+', '+state[j]+' '+zip[j]); document.write("</td>"); document.write("</tr>") } </script> </div> <div id="totals"> <script type="text/javascript"> var contributions=j; var $total=amountTotal(); document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>"); document.write("Summary"); document.write("</th>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Contributors</th>"); document.write("<td>"+contributions+"</td>"); document.write("</tr>"); document.write("<tr>"); document.write("<th>Amount</th>"); document.write("<td>"+"$"+$total+"</td>"); document.write("</tr>"); document.write("</table>"); </script> </div> </body> </html> Similar TutorialsHello Coding Forum gurus, I'm hoping to find some help here with a javascript order form. I am currently working on a javascript form that requires field validation as well as a summary page (order confirmation) after every field is entered correctly. At this point I am satisfied with the field validation portion of the script, however, I am not sure how to call a function to display the summary page. here is a description of my dilemma: To begin, the field validation functions are called by the form's onsubmit event handler. Which then works it way through several text field validation functions. After the script finishes validating and checking each field for acceptable input, how do I call a function to display a summary page of the order form? On a side note, the only programming experience I have ever had is with javascript. I have never taken any other programming classes, and I am fairly new to this. Any help would be appreciated. Not sure if I am allowed to post the entire script here or not but I'd be willing to send to anyone that would like to take a look, HUGE THANK YOU in advance to anyone that takes time out of their busy schedules to take a look. Pardon my rookie question as I know little about code, but have managed with some help to get a basic setup of what I want, just not quite the end product. I have a pricing page that is broken into multiple categories per phase. I want a customer to be able to select my checkboxes and hit a button that will display a rolled up total. I also want it to be able to re-calculate the totals if a box is subsequently unchecked. I have browsed and searched the form to get the code to where it is now but need help to finish it. Thank you in advance, Here is a bit of the code I am using so you have an example" Code: <div class="item"> <h1>Phase 1: Structurals</h1> </div> <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Engineering" /> Phase 1: Complete w/ Engineering <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Out Engineering" /> Phase 1: Complete w/ Out Engineering <input name="Phase 1" type="checkbox" value="10~~Foundation: Monoslab" /> Foundation: Monoslab <input name="Phase 1" type="checkbox" value="20~~Foundation: Post Tension" /> Foundation: Post Tension <input name="Phase 1" type="checkbox" value="30~~Foundation: Stemwall" /> Foundation: Stemwall <input name="Phase 1" type="checkbox" value="40~~Foundation: Basement" /> Foundation: Basement <input name="Phase 1" type="checkbox" value="40~~Framing w/ Engineering" /> Framing w/ Engineering <input name="Phase 1" type="checkbox" value="40~~Framing w/ out Engineering" /> Framing w/ out Engineering <input name="Phase 1" type="checkbox" value="40~~Framing Hardware (with Engineering ONLY)" /> Framing Hardware (with Engineering ONLY) <div class="item"> <h1>Phase 2: Mechanicals</h1> </div> <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Engineering" /> Phase 2: Complete w/ Engineering <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Out Engineering" /> Phase 2: Complete w/ Out Engineering <input name="Phase 2" type="checkbox" value="10~~Plumbing" /> Plumbing <input name="Phase 2" type="checkbox" value="20~~HVAC" /> HVAC <input name="Phase 2" type="checkbox" value="30~~Electrical" /> Electrical <div class="item"> <h1>Phase 3: Exterior Finishes</h1> </div> <input name="Phase 3" type="checkbox" value="0~~Phase 3: Complete" /> Phase 3: Complete <input name="Phase 3" type="checkbox" value="0~~Housewrap" /> Housewrap <input name="Phase 3" type="checkbox" value="10~~Brick" /> Brick <input name="Phase 3" type="checkbox" value="20~~Stone" /> Stone <input name="Phase 3" type="checkbox" value="30~~Vinyl Siding" /> Vinyl Siding <input name="Phase 3" type="checkbox" value="30~~Cementitious Siding" /> Cementitious Siding <input name="Phase 3" type="checkbox" value="30~~Roofing" /> Roofing <input name="Phase 3" type="checkbox" value="30~~Windows" /> Windows <input name="Phase 3" type="checkbox" value="30~~Exterior Doors" /> Exterior Doors <div class="item"> <h1>Phase 4: Interior Finishes</h1> </div> <input name="Phase 4" type="checkbox" value="0~~Phase 4: Complete" /> Phase 4: Complete <input name="Phase 4" type="checkbox" value="0~~Insulation" /> Insulation <input name="Phase 4" type="checkbox" value="10~~Drywall" /> Drywall <input name="Phase 4" type="checkbox" value="20~~Paint" /> Paint <input name="Phase 4" type="checkbox" value="30~~Interior Trim" /> Interior Trim <input name="Phase 4" type="checkbox" value="30~~Interior Doors" /> Interior Doors <input name="Phase 4" type="checkbox" value="30~~Mirrors" /> Mirrors <input name="Phase 4" type="checkbox" value="20~~Shelving" /> Shelving <input name="Phase 4" type="checkbox" value="30~~Bath Accessories" /> Bath Accessories <input name="Phase 4" type="checkbox" value="30~~Countertops" /> Countertops <input name="Phase 4" type="checkbox" value="30~~Cabinets" /> Cabinets <input name="Phase 4" type="checkbox" value="30~~Shower Surrounds" /> Shower Surrounds <input name="Phase 4" type="checkbox" value="30~~Shower Enclosures" /> Shower Enclosures <div class="item"> <h1>Phase 5: Flooring</h1> </div> <input name="Phase 5" type="checkbox" value="0~~Flooring" /> Flooring I'm using php to write nested div's to a page. The div's display depending on a condition PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID1);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(divID2);</script>"; echo "<div id='divID2'>"; echo "<table id='tableID'><tr><td></td></tr></table>"; This is the javascript function Code: <script type='text/javascript'>
function display(id)
{
document.getElementById(id).style.display='block';
}
</script>
while both divs have {display: none;} as default, the outer div {border:solid;} does display but inner div {border:solid;} does not display. I've tried this: PHP Code: (if condition true) echo "<script type='text/javascript'>display(divID);</script>"; echo "<div id='divID1'>"; (if condition true) echo "<script type='text/javascript'>display(tableID);</script>"; echo "<table id='tableID'><tr><td></td></tr></table>"; then display using block, inline-block, table, inline-table, and still the inner element div or table will not display. Can anyone help me with this? Hi guys, I am new to this forum and I am sorry if this is not the right section to post this. Please move this to the appropriate section. I am rather new to HTML and Javascripting and am currently developing an Intranet Webpage. On one of the pages, I am required to update the contents of the webpage using a .csv file which will be uploaded to the server on a daily basis. I have learnt that it is possible to update the contents using "Tabular Data Control" to display the contents and update it regularly. I am also reuqired to change an images according to content in the table. However, I am only able to retrieve the first row the the table and therefore would like some assistance to help retrieve the subsequent rows. Here are my codes: Codes for the .csv/.txt files Code: Name,Status Item #1,Completed Item #2,Pending Item #3,Not Started Item #4,Completed Item #5,Completed Item #6,Pending HTML codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="loadStatus()">
<script type="text/javascript">
function loadStatus(){
var textField = document.getElementById("test").innerText
alert(textField);
if(textField == "Completed") {
document.getElementById("pic").src = '/images/completed.jpg'; }
else if (textField == "Pending") {
document.getElementById("pic").src = '/images/on-going.jpg'; }
else if (textField == "Not Started") {
document.getElementById("pic").src = '/images/not_started.jpg'; }
}
</script>
<OBJECT ID="data" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="test.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
<table border="1" bordercolor="#000000" cellpadding="0" datasrc="#data" >
<THEAD><TR>
<TBODY>
<TR>
<TD><img src="" width="14" height="14" id="pic"></TD>
<TD><div datafld="Name"></div></TD>
<TD id="test"><span datafld="Status"></span></TD></TR>
</TBODY>
</TABLE>
</body>
</html>
I have thought of adding 6 different <object> and 6 <span> using filter to filter each object according to their name. But it would be very messy and would make the page bigger in size. I hope you guys can help me. Thanks in advance. Cheers, Jermms I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at... Code: <!DOCYTYPE html>
<html>
<head><title>Numeric Bases</title>
<style type="text/css">
body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
h1 {border-bottom: 1px solid #aaa; text-align: center; }
p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
table { width: 50%; margin: 0 auto; }
caption { font-size: xx-large; font-weight: bold; }
thead > tr {background-color: #aaa; }
td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
tr.alternate { background-color: #eee; }
</style>
<script type="text/javascript" src="num-bases1.js"></script>
</head>
<table>
<caption>Numerical values in various bases</caption>
<thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
<tbody></tbody>
</table>
</body></html>
Code: /*
* The following function should generate table cells
* that contain an integer (in base 10), and its equivalent
* in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
*/
var num_bases = function(max_number) {
output = '';
for ( var count = 1; count <= max_number; count++){
var binary = count.toString(2);
var octal = count.toString(8);
var hex = count.toString(16);
output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>';
}
// TODO:
// Write a for loop that appends HTML for the
// table row and cells to the output.
//
// The following is an example of a table row:
//
// <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
//
// Every other row should have an "alternate" class:
//
// <tr class="alternate">
document.getElementById('num-bases').innerHTML = output;
}
window.onload = function() {
num_bases(50);
}
I'm trying to click on a link and via Ajax, get a table row to display updated data. I have it all working except it displays at the top of the table instead of inside the table at the desired row. For now, I'm just trying to add a simple table row using: Code: <TR><TD>test</TD></TR> Here is my table code: Code: <TABLE> <TR><TD>one</TD></TR> <TR><TD>two</TD></TR> <span id="id_row3"></span> </TABLE> So when I click on my link to execute the ajax code, I expect to see a table row inserted with the text "four" but "four" displays at the top of the web page, above the table itself. How can I get the new row to insert at the id_row3 tag? Thanks for any help... I have a spinner where user enters in their value or uses the buttons to increase or decrease the value. When the user is happy with the value in the spinner the user submits the value. The value would then appears in another table inside a textbox. What my question is, is that how can I get it so that when user submits value in the other table that the spinner buttons are also displayed in the other table so that except the value is in a textbox, it is displayed in a spinner which operates exactly the same as the spinner in the previous table? Below is code where the value from the first spinner is retireved and oututted into another table into a textbox: Code: function insertQuestion(form) {
var row = document.createElement("tr");
var cell,
input,
alertErrors = "",
qnum = 1;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
input.value = form.textWeight.value;
cell.appendChild(input);
row.appendChild(cell);
document.getElementById("qandatbl").appendChild(row);
}
Below is html code which shows 3 tables, first table is where the user enters in the value of the answer weight in the spinner, second table is the submit button (Add Question) and third table is where the value is displayed after submission of the first spinner. Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<div id="detailsBlock">
<table id="answerWeight">
<tr>
<th colspan="3">
Answer Weight
</th>
</tr>
<tr>
<td class="spinner">Weight: <input type="text" class="spinnerWeight" name="textWeight" id="txtWeight" />%</td>
<td><button class="scrollBtn" id="btnWeightUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnWeightDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<table id="qandatbl" border="1">
<tr>
<th class="qid">Question No</th>
<th class="question">Question</th>
<th class="option">Option Type</th>
<th class="answer">Answer</th>
<th class="weight">Weight</th>
</tr>
</table>
</form>
Hoefully that is all the information you require. If you want more information then just add a comment to me. Thank you. 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? New to this, worked through the w3c tutorials and am really fascinated by some of the concepts. I'm only familiar with html, css, js (basics), so am trying to keep things as simple as I can for this. For simplicity I'll use books.xml with a listing of books. Each book has a <title><author><year><price> and <image> element. The images are stored in a folder called "images" a path is listed in the xml document. Using js and an array I can loop through the xml file and have it extract each node into a table, if I mouseOver a ROW in the table, it displays that listing in a DIV above and I would like it to display the image/thumbnail for that particular listing within another div called thumbnail which is in the same location regardless of which listing you mouseOver. Quote: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("book"); i=0; function displayBook(i) { title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); author=(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue); year=(x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue); price=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue); genre=(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); txt="Author: "+author+"<br />Title: "+title+ "<br />Year: "+year+"<br />Price: "+price + "<br />Category: " +genre; document.getElementById("showBook").innerHTML=txt; } Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="text/javascript" src="myscript.js"></script> <link rel="stylesheet" type="text/css" href="stylin.css" /> </head> <body onload="displayBook(0)"> <div id="wrap" width="40%"> <div id="desc">Listing: </div> <div id='showBook'></div><br /> <div id="thumbnail">thumbnail <script type="text/javascript"> document.write(????????????????); </script></div> <script type="text/javascript"> document.write("<table border='1'; >"); document.write("<caption>Mouse over a cell to view description:</caption"); document.write("<tr><td class=top>Book Title</td><td class=top>Category</td><td class=top>Cost: </td></tr>"); for (var i=0;i<x.length;i++) { document.write("<tr onMouseOver='displayBook(" + i + ")'; >"); document.write("<td>"); document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); document.write("</td><td>" + "$"); document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue ); document.write("</td><td>"); document.write(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue ); document.write("</td></tr>"); } document.write("</table>"); </script></div></div> </body> </html> So the way this looks is there's a grey div. At the top it says listing, and when the body loads it lists the [0] first entry from the array. To the right of this is a small div called thumbnail that is empty and I would like it to load the relevant image from the path in the <image> tag in the xml file. Below the listing is a table with 4 columns (title, genre, price, image) and an equal number of rows to the number of listings in the xml file. Under the "image" column it just shows the path to the image. So how do I tie the empty thumbnail div to the listing so it'll just add the path from the xml <image> tag into a <img src="pathnamefromxmldocument"> Thanks in advance! Hello, I am new to JavaScript. I have stuck up at a point. I have generated a table of given dimensions (say 5x5) using JavaScript. Using Mouse events, I want to add a functionality which would display the position of the cell in that table whenever mouse pointer hovers over a particular cell. Here's what I have done. Code: <html>
<body>
<h1 align="center"><u>ITA Tutorial</u></h1>
<h3>Problem Statement</h3>
<p>Prepare the table of 5 X 5. On the cursor movement over the table, display the table cell no with row X column value.</p>
<br><br>
<table border="1" align="center" cellpadding="2">
<script type="text/JavaScript">
var i, j
for (i=1;i<6;i++)
{
document.write("<TR>")
for(j=1;j<6;j++)
document.write("<TD> </TD>")
document.write("</TR>")
}
</script>
</table>
</body>
</html>
I tried adding onMouseover event in the <TD> tag but somehow the whole table disappears when I do that. Please help. Hi All, I have a button in my html form that will process some functions when user clicks on the button. The problem is after processing the functions, the result is not displayed in the form where I want it to be displayed. I want to ask whether we can create table in the function and display the result in the table row/column but in the same form. Is this possible to be done? And how to do this? In this form cpiM, the input button will call function showIndex. Code: <tr> <td><input type="button" value="Enter" onclick="showIndex(document.cpiM.currFrom.options.selectedIndex, document.cpiM.currTo.options.selectedIndex, document.cpiM.base.options.selectedIndex, document.cpiM.country.options.selectedIndex)"> </td> <td><input type="button" onclick="frmResetM()" value="Reset form" /> </td> </tr> In this function, I want to display the result of calcIndex right below the button Enter in the form cpiM. Code: function showIndex(frm, to, base, country)
{
for (i=frm; i<=to; i++)
{
document.write(calcIndex(i, base, country));
document.write("<br/>");
}
}
Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance <style> .table th {border-style: solid; border-color: red;background-color: #CCCCFF; } </style> <body> <table border="1" class="table"> <thead> <th colspan = "5">Click an Image to Enlarge </th> </thead> <tbody> <tr> <td> <img src = "Thumbnails/ada1838-thumb.JPG" alt = "ada1838-thumb" > </td> <td> <img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb"> </td> <td> <img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb"> </td> <td> <img src = "Thumbnails/aediagram-thumb.JPG" alt = "aediagram-thumb"> </td> <td> <img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb"> </td> </tr> <tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center"> </td> </tr> <thead> <th colspan = "5"> </th> </thead> </table> </body> </html> I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
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> </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>
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,""); |
|||||||