|
JavaScript - Javascript Table Help
Im making a html javascript table that is set to take the number of rows and cols from the user input. i cant make sense of the psuedocode the teacher gave us though. can anyone convert the psuedocode to actual code? the point of the lesson is while loops and do while loops. i basically understand the concept but his psuedocode confuses me :/ im trying to make my question is clear as possible. ask if i've left out a key detail
var cols; var rows; cols = prompt("enter number of cols", "5"); cols = parseFloat(cols); rows = prompt("Enter ynumber of rows", "5"); rows = parseFloat(rows); print "<table border=1>" FOR i = 1 to rows DO print "<tr>" FOR j=1 to cols DO print "<td>Row " + i + " Col " + j + "</td>" END FOR print "</tr>" END FOR print "</table>" im confused about the "print" is that meant to be document.write.? ive tried a million ways. ps. the "cols" and "rows" are the variables. i already have it set to take the values with a prompt from the user. thanks alot (im a student trying to learn this in college) thats why the whole program is kinda pointless) I have an 11pm deadline to submit this. Similar TutorialsMy 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. i'll go straight to the point, i have 8 rows and 3 columns, i want to populate each <td> starting from: row 0 column 0 a value of 1 row 0 column 1 a value of 2 row 0 column 2 a value of 3 row 1 column 0 a value of 4 row 1 column 1 a value of 5 ... row 7 column 2 a value of 24 let's say starting point is at row1 col1: | x | x | x | | x | 1 | 2 | | 3 | 4 | 5 | .......etc..... x = blank or no data here's the code: Code: <script type="text/javascript">
function changeContent() {
var t = document.getElementById('tblVisaStk');
var k = getCookie('matrix'); // starting point, set in a different file
var r = k[1]; // e.g. from R2C1, extract coordinates row 2
var c = k[3]; // column 1
var col;
for(var i = r; i < r+8; i++) {
for (var j = c; j < 3; j++) {
if (t.rows.length > i) {
if (t.rows[i].cells.length > j) {
//t.rows[i].cells[j].innerHtml = (i-r)*3 + j + 1;
t.rows[i].cells[j].appendChild(document.createTextNode(''+((i-r)*(3-c) + (j-c) + 1)));
}
}
}
}
}
</script>
the starting point may vary, any help please? Hello Everyone, So I am attempting to put a table within my JavaScript. However, everything that I try does not work. I have done a ton of research on how to do this but it's always with different scenarios, or it just does not work for me. Any hints would be appreciated, thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<link rel="stylesheet" type="text/css" href="UNIT_3.css"/>
<title></title>
</head>
<body>
<script type="text/javascript">
<!--
document.write('<h1>Number Square<h1> <br/>');
document.write('<table>');
for(var intSquare = 1; intSquare <=10; intSquare++)
{
document.write('<tr>');
document.write('<td>' + intSquare + "" + intSquare + '</td>');
document.writeln(intSquare + "" + intSquare * intSquare);
document.write('</tr>');
document.writeln("<br/>");
}
document.write('</table>');
// -->
</script>
</body>
</html>
Hi, I am having a hard time to display a table with user preference of how many rows/columns to create a multiplication table. I think I have to user DOM but I am not sure and I am not sure how to use it. My question is, how do I get the user input to use as a dynamic array input in a for loop so I can create the multiplication table using CSS ? Here is my code: [CODE] Hi, I am having a hard time to display a table with user preference of how many rows/columns to create a multiplication table. I think I have to user DOM but I am not sure and I am not sure how to use it. My question is, how do I get the user input to use as a dynamic array input in a for loop so I can create the multiplication table using CSS ? Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Multiplication table web page </title>
<style type="text/css">
h2 {text-align: center;}
table {position:absolute;left:300px;}
</style>
</head>
<body>
<h2>Multiplication Table</h2>
<script type="text/javascript">
<!--
var size;
do {
size = prompt("What size table do you want?","10");
} while ((size < 1) || (size > 15));
document.write("<table border=\"5\" cellpadding=\"5\" cellspacing=\"5\">");
document.write("<tr><th> *</th>");
for(var i = 0; i < 10; i++)
{
for(var j = 0; j < 10; j++)
{
size = i * j;
}
}
document.write("</table>");
// -->
</script>
</body>
</html>
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 am trying to allow the user to type in two numbers and then a multiplication table pops up below it. It works however I cannot figure out how to make the first row be 0,1,2,3,4,5..ect and same for the first column in each row going down the table. Here is my code.. Code: <html>
<head>
<title>Untitled</title>
<script>
function f(x,y)
{
if((x < 3) || (y < 3) || (x > 10) || (y > 10)){
alert("Please enter numbers between 3 and 7")
}else{
s = "<table border = '1'>"
var total;
for (i=0; i<=x; i++){
s+= "<tr></tr>";
for (j=0; j <= y; j++){
total = i * j;
s+="<td>"+ total +"</td>"
}
}
s+="</table>"
document.getElementById("Q").innerHTML+=s
}
}
</script>
</head>
<body>
[enter a number between 3 and 10]
<form id = "form1">
<input id = "a" value = "6"> by <input id = "b" value = "8"><br>
<input type = "button" onclick = "f(a.value,b.value)" value = "Click here when ready!">
<br>
</form>
<div id = "Q"></div>
</body>
</html>
Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it. The table doesn't fade in The HTML that is produced is exactly this, but the hashes are urls: Code: <table style="float:left; opacity:0; "> <tr <td> <a href="#" rel="lightbox[group]"> <img src="#" width="97" height="97" /> </a> </td> </tr> <tr> <th> </th> </tr> </table> These are my two functions Code: function addImage(src) {
var table = document.createElement("table");
table.style.float = "left";
var tr_1 = document.createElement("tr");
var td_1 = document.createElement("td");
var a_1 = document.createElement("a");
a_1.src = src;
a_1.rel = "lightbox[group]";
var img_1 = document.createElement("img");
img_1.src = src;
img_1.width = 97;
img_1.height = 97;
a_1.appendChild(img_1);
td_1.appendChild(a_1);
tr_1.appendChild(td_1);
var tr_2 = document.createElement("tr");
var th_2 = document.createElement("th");
tr_2.appendChild(th_2);
table.appendChild(tr_1);
table.appendChild(tr_2);
document.getElementById("thumbnails").appendChild(table);
if (table.filters) {
try {
table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
table.style.opacity = 0;
}
table.onload = function () {
fadeIn(table, 0);
};
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5;
var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
this is the previous addImage function: Code: function addImage(src) {
var newImg = document.createElement("img");
newImg.style.margin = "5px";
document.getElementById("thumbnails").appendChild(newImg);
if (newImg.filters) {
try {
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
newImg.style.opacity = 0;
}
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
The opacity of the table stays at 0, and never appears (but I can still click on the link) Can anyone help me make the table fade in like it was supposed to? Hi, I'm new to Javascript and need to help with something, I'll try and explain this as best as I can but feel free to ask questions if it doesn't make sense. I'm basically building a javascript/html calculator but I need the calculation to appear gradually in a table, the table need to be 3 columns accross and add a row each time a calculation button is pressed, the first column can remain blank for now but will need to contain a text field eventually, second column needs to show the calculation symbol, third column shows the number. Here's an example: 4+2+7-5=8 |Blank| | 4 | |Blank| + | 2 | |Blank| + | 7 | |Blank| - | 5 | |Blank| = | 8 | Here's the code I have so far so you can get a feeling of what it looks like, this table need to go into the area div and will replace what is currently the 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>Sample Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="basic.js"></script>
<meta name="generator" content="Nokia WRT extension for Visual Studio 2.0" />
<script type="text/javascript" language="javascript">
function UpdateInput(a, b) {
var MyElement = document.getElementById("Input");
MyElement.innerHTML = MyElement.innerHTML + a;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + b;
}
function Calculate() {
var result = eval(document.getElementById("Input").innerHTML);
var total = document.getElementById("Total");
total.innerHTML = result;
var MyElement = document.getElementById("Area");
MyElement.innerHTML = MyElement.innerHTML + '<br>=' + result;
}
</script>
</head>
<body onLoad="init()">
<div id="Main">
<table cellpadding="0" cellspacing="0" width="100%">
<div id="Area">
</div>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="style1">Total:</td>
<td>
<div id="Total"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="Input"></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="Images/plus.png" onclick="UpdateInput('+','<br>+')" /></td>
<td><img src="Images/minus.png" onclick="UpdateInput('-','<br>-')" /></td>
<td><img src="Images/times.png" onclick="UpdateInput('*','<br>*')" /></td>
<td><img src="Images/divide.png" onclick="UpdateInput('/','<br>/')" /></td>
</tr>
<tr>
<td><img src="Images/7.png" onclick="UpdateInput(7,7)" /></td>
<td><img src="Images/8.png" onclick="UpdateInput(8,8)" /></td>
<td><img src="Images/9.png" onclick="UpdateInput(9,9)" /></td>
<td><img src="Images/percent.png" onclick="UpdateInput('%','<br>%')" /></td>
</tr>
<tr>
<td><img src="Images/4.png" onclick="UpdateInput(4,4)" /></td>
<td><img src="Images/5.png" onclick="UpdateInput(5,5)" /></td>
<td><img src="Images/6.png" onclick="UpdateInput(6,6)" /></td>
<td><img src="Images/oneoverx.png" /></td>
</tr>
<tr>
<td><img src="Images/1.png" onclick="UpdateInput(1,1)" /></td>
<td><img src="Images/2.png" onclick="UpdateInput(2,2)" /></td>
<td><img src="Images/3.png" onclick="UpdateInput(3,3)" /></td>
<td><img src="Images/plusminus.png" /></td>
</tr>
<tr>
<td><img src="Images/0.png" onclick="UpdateInput(0,0)" /></td>
<td><img src="Images/dot.png" onclick="UpdateInput('.','.')" /></td>
<td><img src="Images/equals.png" onclick="Calculate()" /></td>
<td><img src="Images/sub.png" /></td>
</tr>
</table>
</div>
</body>
</html>
Hello Everyone, I'm new to JavaScript and I need some help, What I'm trying to do is type a background color for the content area of a table by using the prompt box. This is the code I had but it didn't work: <html> <head><title>Practice</title> <script type="text/javascript"> //content color var table = prompt("Choose a color for the content area", "white "); document.write("<table BGCOLOR=" + table + " >"); </script> </head> <body bgcolor="black"> <table bgcolor="" width="600px" height="600px" cellpadding="15" border="0" align="center"> <!-- ============ HEADER ============== --> <tr> <td height="35px" colspan="2" align="center"><p align="center"><a href="http://www.youtube.com/">YouTube</a> | <a href="http://www.facebook.com/">Facebook</a> | <a href="http://www.twitter.com/">Twitter</a> | <a </td></tr> <!-- ============ LEFT COLUMN (CONTENT) ============== --> <tr> <td rowspan="6" width="500" valign="top"><td></tr> <input type="file" onclick="disp_prompt()" value="Display a prompt box" /> <script type="text/javascript"> var <!-- ============ RIGHT COLUMN ============== --> <tr><td width="174px" valign="top"> </td></tr> <!-- ============ FOTTER ============== --> <tr> <td height="35px" colspan="2" align="center"> </td></tr> </body> </html> Here's the code a friend gave me but it didn't work either: <script type="text/javascript"> var contentbg = prompt("What background color would you like your content to be?", "White"); document.write("<table align=\"center\" border=\"1\" cellpadding=\"15\" width=\"600\" height=\"600\" bgcolor=\"" + contentbg + "\">"); </script> Please! help me out. Thanks. I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
Ok, just to be honest this is for my assignment from my University, I have completed the whole code myself I just can't seem to get just one little thing. Code: function GenerateTables(){
var start = document.tables.start.value;
var end = document.tables.end.value;
var size = document.tables.size.value;
for (start; start <= end; start++) {
document.write("<table width='100' align='center'>")
document.write("<caption><b>Table of </b>" + start + "</caption><br>")
document.write("</table><br>")
for (var i = 1; i <= size; i++) {
document.write("<table border=1 align='center'>")
document.write("<tr height=40 align='center'>")
document.write("<td width=40 align='center'>" + start + "</td>")
document.write("<td width=40 align='center'> * </td>")
document.write("<td width=40 align='center'>" + i + "</td>")
document.write("<td width=40 align='center'> = </td>")
document.write("<td width=40 align='center'>" + start * i + "</td>")
document.write("</tr>")
document.write("</table>")
}
}
}
The function generates multiplication tables depending on the input user provides using this interface (given below). And it generates them like this (given below). Now what I want is to generate those tables sideways not downwards. Not all the tables, but it should complete one table downwards, then start the new table on its side. I can't seem to figure out anything that would make that happen, and ideas would be appreciated, thanks. Regards, Papichoolo. OK, so I have this table I am putting on a new website I am building. The table works great. Does exactly what I want it to do, except for one thing. Here's the code for the table: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Artist'); data.addColumn('string', 'Title'); data.addColumn('string', 'Song #'); data.addRows([ ['Colin Hay', 'Overkill (Men at Work Acoustic)', 'GKK-02'], ['Colin Hay', 'Waiting for My Real Life to Begin', 'GKK-01'], ['Lindsey Buckingham', 'Big Love (Fleetwood Mac Acoustic)', 'GKK-03'] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true}); } </script> </head> <body> <div id="table_div"></div> </body> </html> Now, here's the problem. In the third column, I need to insert a unique hyperlink for each song # in each row. When I try to add a hyperlink, it shows the code instead of a link. I am a coding NOVICE. Everything I know, I have taught myself. The solution to this is escaping me. Please help? Reply With Quote 12-31-2014, 02:11 AM #2 CanYouDigIt View Profile View Forum Posts New Coder Join Date Dec 2014 Posts 14 Thanks 1 Thanked 0 Times in 0 Posts Also.... forum admin.... please edit my typo in the thread title so I don't look like more of an idiot than I actually am. Thanks. Reply With Quote 12-31-2014, 03:37 AM #3 Kharahs View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 2 Thanks 0 Thanked 0 Times in 0 Posts I'm fairly new to javascript (but have quite a bit of experience working with HTML and CSS - also self taught) so I could be misunderstanding, but are you using something along the lines of... Code: <a href="http://etcetc.com">Text you want the hyperlink applied to</a> ...for the hyperlink? Reply With Quote 12-31-2014, 03:39 AM #4 CanYouDigIt View Profile View Forum Posts New Coder Join Date Dec 2014 Posts 14 Thanks 1 Thanked 0 Times in 0 Posts Originally Posted by Kharahs I'm fairly new to javascript (but have quite a bit of experience working with HTML and CSS - also self taught) so I could be misunderstanding, but are you using something along the lines of... Code: <a href="http://etcetc.com">Text you want the hyperlink applied to</a> ...for the hyperlink? Exactly correct. But that code is not functioning inside the javascript for the table. Reply With Quote 12-31-2014, 04:18 AM #5 Kharahs View Profile View Forum Posts New to the CF scene Join Date Dec 2014 Posts 2 Thanks 0 Thanked 0 Times in 0 Posts Create link in an html table with javascript - Stack Overflow - looks like a similar issue? One of the responses may have a clue Reply With Quote 12-31-2014, 04:31 AM #6 low tech View Profile View Forum Posts Regular Coder Join Date Dec 2009 Posts 905 Thanks 177 Thanked 104 Times in 104 Posts Hi I haven't worked with this before but something like this maybe as an example would produce links on song column example link <a href="http://www.example.com/GKK-01">GKK-01</a> PHP Code: <div id="table_div"></div> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Artist'); data.addColumn('string', 'Title'); data.addColumn('string', 'Song #'); data.addRows([ ['Colin Hay', 'Overkill (Men at Work Acoustic)', 'GKK-02'], ['Colin Hay', 'Waiting for My Real Life to Begin', 'GKK-01'], ['Lindsey Buckingham', 'Big Love (Fleetwood Mac Acoustic)', 'GKK-03'] ]); var table = new google.visualization.Table(document.getElementById('table_div')); var formatter = new google.visualization.PatternFormat( '<a href="http://www.example.com/{1}">{0}</a>'); // Apply formatter and set the formatted value of the first column. formatter.format(data, [2, 2]); //table.draw(data, {showRowNumber: true}); table.draw(data, {allowHtml: true, showRowNumber: true}); } </script> Hi, I have a problem. please help me in this regard. I have a combobox which contain numeric values from 1-7. i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on. kindly guide me that how can i mkae this javascript. plz help I need to make a table fadeout with JavaScript when I click a button. The table is simple. Code: <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'> <tr class="dataRow"> <td>11</td> <td>12</td> <td>13</td> </tr> <tr class="dataRow"> <td>21</td> <td>22</td> <td>23</td> </tr> <tr id="row3" class="dataRow"> <td>31</td> <td>32</td> <td>33</td> </tr> <tr class="dataRow"> <td>41</td> <td>42</td> <td>43</td> </tr> </table> There is a button that calls a function called fadeout(). I cannot find a way to make the table fade out with just that one function. Is that even possible? If not, what other functions are necessary to make this happen? I have been at this for days now. THe problem is these scripts dont work well accross all browsers. I like how this script works but it opens a full window. And wont let me add table. http://www.dynamicdrive.com/dynamicindex4/logo_dev.htm But I can not get it to work with a table. The links I want to open a new window without scrolling, sizeable and toolbar. <table border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <a href="unsaved:///Contact Us" onClick="MyWindow=window.open('https://domain.com/contactus.html"><img src="https://domain.com/images.gif" alt="Contact Us" border="0"></a> </td> </tr> <tr> <td> <center> <font face="Arial" size="3" color="#0000FF">call US</font> </a> </center> </td> </tr> <tr> <td> <center></a>or<a href="mailto:sales@domain.com"> Email Us</a> </center> </td> </tr> </table> Please help! Hi, I'm trying to create a Invoice form with javascript. Basically, my invoice form should have the field item, cost, quantity and product total. It shd have a function to allow the user to add rows if they want more than one item. In the end, there should be a sub total. I am able to use javascript to calc the total of each product, but not all products(Grand total). I am also unable to add rows. Can anyone help me? Thanks! This is what I have so far: <? mysql_connect("", "", ""); mysql_select_db(invoice); session_start(); ?> <!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> <script type="text/javascript" language="javascript"> function calcProdTotal(){ var total; var amount = parseInt(document.invoiceForm.qty.value); total = (parseFloat(document.invoiceForm.price.value) * amount); document.invoiceForm.Prodtotal.value = round_decimals(total, 2); } function round_decimals(original_number, decimals) { var result1 = original_number * Math.pow(10, decimals) var result2 = Math.round(result1) var result3 = result2 / Math.pow(10, decimals) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // Convert the number to a string var value_string = rounded_value.toString() // Locate the decimal point var decimal_location = value_string.indexOf(".") // Is there a decimal point? if (decimal_location == -1) { // If no, then all decimal places will be padded with 0s decimal_part_length = 0 // If decimal_places is greater than zero, tack on a decimal point value_string += decimal_places > 0 ? "." : "" } else { // If yes, then only the extra decimal places will be padded with 0s decimal_part_length = value_string.length - decimal_location - 1 } // Calculate the number of decimal places that need to be padded with 0s var pad_total = decimal_places - decimal_part_length if (pad_total > 0) { // Pad the string with 0s for (var counter = 1; counter <= pad_total; counter++) value_string += "0" } return value_string } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Invoice</title> <style type="text/css" media="screen"> @import url("css/layout.css"); .style1 { font-size: 14px; font-weight: bold; } .style2 {font-size: 14px} </style> </head> <body> <? include("header.php"); ?> <div class="find_more"> <p>Create new Invoice</p> </div> <div class="container_row"> <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px"> <? $sqlstmt = "SELECT * From Client"; $result = mysql_query($sqlstmt); $options= ""; while ($row=mysql_fetch_array($result)) { $ClientID = $row["Client_ID"]; $orgName = $row["Org_Name"]; $options.="<option value = \"$ClientID\">".$orgName."</option>"; } $sqlstmt2 = "SELECT * From Item"; $result2 = mysql_query($sqlstmt2); $options2= ""; while ($row=mysql_fetch_array($result2)) { $ItemID = $row["Item_ID"]; $itemName = $row["Item_Name"]; $options2.="<option value = \"$ItemID\">".$itemName."</option>"; } ?> <form name="invoiceForm" method="post" action=""> <p><strong>TO:</strong> <select name ="Client"> </br></br></br> <option value = ""> --Select a Client-- <?= $options ?></option> </select></p> <table> <table border='0' cellpadding='2' cellspacing='2' width='600' > <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Attention</th> <th>From</th> <th colspan="2">Payment terms</th> </tr> <tr align='centre' valign='centre'> <td><input type="text" name = "contact"/></td> <td><input type="text" name = "sender"/></td> <td colspan="2"><input type="text" name = "paymentTerms"/></td> </tr> <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Item Name</th> <th>Cost ($)</th> <th>Quantity</th> <th>Total</th> </tr> <tr align='centre' valign='centre'> <td><select name ="ItemName"> <option value = ""> --Select a Item-- <?= $options2 ?></option> </select> </td> <td><input name="price" type="text" id="price"></td> <td><input type="text" size="5" name="qty" onChange="calcProdTotal()"></td> <td><input type="text" name="Prodtotal" onBlur="parseelement(this)"></td> </tr> <tr> <th colspan="3" align='right'>GST:</th> <td><input type="text" value="7" name = "gst"/>%</td> </tr> <tr> <th colspan="3" align='right'>Sub Total:</th> <td><input type="text" name = "Subtotal"/></td> </tr> <tr> <th colspan="3" align='right'>Grand Total:</th> <td><input type="text" name = "Grandtotal"/></td> </tr> </table> </form> <br /> <? include("footer.php"); ?> </body> </html> I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
</head>
<body>
<table id="tbl" border="2">
<thead>
<tr>
<td></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Is it possible to use JavaScript to locate all of the "smiley sad Icon.jpg"'s and output the location within the table? Such as A3, and B2. Thank you in advance. Code: <html>
<body>
<table width="200" border="1">
<tr Id="A">
<td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"> </td>
<td Id="2"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
<td Id="3"><img src="http://www.iconeasy.com/icon/thumbnails/System/Icons%20for%20Developers/smiley%20sad%20Icon.jpg"></td>
</tr>
<tr Id="B">
<td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
<td Id="2"><img src="http://www.iconeasy.com/icon/thumbnails/System/Icons%20for%20Developers/smiley%20sad%20Icon.jpg"></td>
<td Id="3"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
</tr>
<tr Id="C">
<td Id="1"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
<td Id="2"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
<td Id="3"><img src="http://www.hencam.co.uk/hencam_forum//extensions/Smile/tango/face-smile.png"></td>
</tr>
</table>
</body>
</html>
I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Hello! I am trying to collapse a table via JS, and the following code works in IE, yet not in Mozilla. I have read lots of other posts (on the world wide web) in regards to possibly tackling this with div, or span: however, in my case, I cannot modify the already existing HTML of the code. Could you please assist me - why is it that the following code works in IE, yet not in Mozilla? More INFO: Please note that although I am using the variable id below, I have also tried this via the defined element el. However -- using el doesn't work in either browsers. Please also note that the function is being called like so: HTP.p( '<table BORDER=0 BORDERCOLOR="#d1dce9" CELLPADDING="0" WIDTH=100% style="border-collapse:collapse;"> <tr> <td onClick="ftoggle(this);" width="100%" style="cursorointer;"><font face="Calibri" color ="#3A5894" size=2><B>[+] Click here to Show/Hide the Table</B></font></td> </tr><tr> <td colspan="1" style="display:none;color:#ff0000;">'); <head> <script language="JavaScript"> function ftoggle(id){ var el = document.getElementById(id); if(id.parentNode.nextSibling.childNodes.item(0).style.display=="") { id.parentNode.nextSibling.childNodes.item(0).style.display="none"; } else { id.parentNode.nextSibling.childNodes.item(0).style.display=""; } } </script> </head>'); |
|||||||