|
JavaScript - Javascript With Css For Multiplication Table
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>
Similar TutorialsI 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>
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. Hello, I am trying to write a javascript page that shuffles an array of questions ( 1x1 , 1x2, 1x3 - 1x12), prints them, then has the user type in the answer, then checks them to make sure the user answer is correct. I have looked up a lot of source code for javascript "quiz" but they all are multiple choice answers and the questions are not shuffled. This is as far as I have gotten, but now I am not sure how to take the user input text and compare them to the answer / question array to make sure to check. Code: <html>
<head>
<title> Slick Math </title>
<script type="text/javascript">
var quest = new Array;
var ans = new Array;
var questprint = new Array;
quest[0] = "1 x 1 ";
quest[1] = "1 x 2 ";
quest[2] = "1 x 3 ";
quest[3] = "1 x 4 ";
quest[4] = "1 x 5 ";
quest[5] = "1 x 6 ";
quest[6] = "1 x 7 ";
quest[7] = "1 x 8 ";
quest[8] = "1 x 9 ";
quest[9] = "1 x 10 ";
quest[10] = "1 x 11 ";
quest[11] = "1 x 12 ";
questprint[0] = quest[0]+"<input type='text' name='q0'></input><br/>";
questprint[1] = quest[1]+"<input type='text' name='q1'></input><br/>";
questprint[2] = quest[2]+"<input type='text' name='q2'></input><br/>";
questprint[3] = quest[3]+"<input type='text' name='q3'></input><br/>";
questprint[4] = quest[4]+"<input type='text' name='q4'></input><br/>";
questprint[5] = quest[5]+"<input type='text' name='q5'></input><br/>";
questprint[6] = quest[6]+"<input type='text' name='q6'></input><br/>";
questprint[7] = quest[7]+"<input type='text' name='q7'></input><br/>";
questprint[8] = quest[8]+"<input type='text' name='q8'></input><br/>";
questprint[9] = quest[9]+"<input type='text' name='q9'></input><br/>";
questprint[10] = quest[10]+"<input type='text' name='q10'></input><br/>";
questprint[11] = quest[11]+"<input type='text' name='q11'></input><br/>";
var score = 0;
ans[0] = 1;
ans[1] = 2;
ans[2] = 3;
ans[3] = 4;
ans[4] = 5;
ans[5] = 6;
ans[6] = 7;
ans[7] = 8;
ans[8] = 9;
ans[9] = 10;
ans[10] = 11;
ans[11] = 12;
function shuffle() {
return (Math.round(Math.random())-.5);
}
questprint.sort(shuffle);
</script>
</head>
<body>
<h1>Slick Math</h1>
<form name="form">
<script type="text/javascript">
document.write(questprint[0]);
document.write(questprint[1]);
document.write(questprint[2]);
document.write(questprint[3]);
document.write(questprint[4]);
document.write(questprint[5]);
document.write(questprint[6]);
document.write(questprint[7]);
document.write(questprint[8]);
document.write(questprint[9]);
document.write(questprint[10]);
document.write(questprint[11]);
</script>
</form>
</body>
</html>
Thanks =] I have javascript function which calculates the product of two numbers. function fnCalculate() { var lat1=price * num; } Here for eg if price is 19.50 and num is 1 then o/p should be 19.50 and not 19.5 as its resturning now. Also if price is 15.00 and num is 1 then o/p should be 15.00 and no just 15. Is it possible ... someone please help Hello, Could someone help me with this problem? I'd like the posted result to be a number with two decimals. I know how to make this normally but not with this kind of script. Thanks very much in advance! Code: <html>
<head>
<script type="text/javascript">
function calcResult(){
document.getElementById('result').innerHTML = '';
var num1 = newNumber(document.getElementById('txt1').value);
var num2 = 0.429;
var num3 = 1;
if(isNaN(num1) || isNaN(num2)){
alert('Please enter a number');
} else {
document.getElementById('result').innerHTML = num1 * num2;
document.getElementById('entry').innerHTML = num1 * num3;
}
}
window.onload=function(){
document.getElementById('btnCalc').onclick = calcResult;
document.getElementById('btnCalc').onclick = calcEntry;
}
</script>
</head>
<body>
<p>
<input type="text" id="txt1" size="5" value="" maxlength="5" />
<button id="btnCalc">Calculate</button>
</p>
<p>
<span id="entry"></span> × 0.429 = <span id="result"></span>
</p>
</body>
</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. 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>
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? 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. 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 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 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??
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>
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> 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. 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 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 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 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? |
|||||||