|
JavaScript - How Do I Create A Table With Number Of Rows Dependent On User Inputs? (javascript)
Here's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow?
document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td Similar TutorialsHi, I'm new here, and I'm a programming newb but am very interested in learning and possibly pursuing programming in the future. As such, I'm taking an intro to Javascript class at my university, and our homework is to make a function that when called upon makes a diamond out of *'s. It is supposed to do so by prompting a user for an int and then makes a diamond shaped object with the inputted number of stars in the middle of the diamond. an example of what this would look like (if a user entered in "5" to the prompt): *<br> ***<br> *****<br> ***<br> *<br> I am not sure how to set up this for loop, and have been trying so many different codes and have come nowhere close. Any help or insight would be so much appreciated. I have the two functions below, I want to write a function that puts them into a chart, I have the chart sorted etc but just struggling with how to get the actual validated users inputs from these two functions into the chart, I've tried document.write('<td> $' + productIndex + '</td>'); into the chart but that wouldn't work anyway as there could be multiple inputs? Just need a way to get the output really. function getProductChoice(min, max) { var getProductChoice = function(min, max){ do{ var productIndex = parseInt(prompt('Enter your product choice; 0-5', '0')); } while( isNaN(productIndex) || productIndex < min || productIndex > max); }; getProductChoice(0,5); } function getProductQuantity(max) { do{ var productIndexQuantity = parseInt(prompt('How many would you like?', '0')); } while( isNaN(productIndexQuantity) || productIndexQuantity < 0 || productIndexQuantity > max); }; getProductQuantity(MAX_QUANTITY); I would like to be able to write a function (or something) to count the number of rows in the table, I don't know how to do it, any help is appreciated.
Hi, Have a dynamic table in JS that adds rows. Want a max of 8 rows. How can that be done? [CODE] <script language="Javascript" type="text/javascript"> function addRow() { var tbl = document.getElementById('ReqDtTbl'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var textNode = document.createElement('input'); textNode.size = 7; textNode.name = 'startdate' + iteration; cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'enddate' + iteration; el.id = 'enddate' + iteration; el.size = 7; cellRight.appendChild(el); // the last cell! var cellRightSel = row.insertCell(2); var sel = document.createElement('select'); sel.name = 'TypeHrs' + iteration; sel.options[0] = new Option('-Select-', '""'); sel.options[1] = new Option('Comp Time', 'Comp Time'); sel.options[2] = new Option('Credit Hrs', 'Credit Hrs'); sel.options[3] = new Option('Overtime', 'Overtime'); sel.options[4] = new Option('Rel Comp', 'RelComp'); cellRightSel.appendChild(sel); var cellRight = row.insertCell(3); var el = document.createElement('input'); el.type = 'text'; el.name = 'No. of Hours' + iteration; el.id = 'No. of Hours' + iteration; el.size = 7; cellRight.appendChild(el); } [CODE] John Hi there, so i am working on a website, and on it there is a video with youtube api. I need to hide all Table-rows that are not during each 5 second time frame. So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40. Each TR displays a start time, content, and end time. Here is what the tables currently look like. Code: <table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>
<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>
</table>
And you can see the page at http://134.117.226.43:8000/check_sub...ty/test101/91/ any help ? I want to use javasript to create a new html page named from a text field in a form. Then I want to use javasript to copy all of the form fields to the new html page that was created using javascripting. I am creating a user are using a Javascript password login. With most of them the page is the user name or password. So this is why I am looking to do this. I use web 1000 a free host and they will only let me use javascripting. Any info or help would be great thank you
I am trying to create three buttons that will scale the page up, down, or reset to a default value. I would like to base that incrementing on a global variable declared in javascript: Code: var canvasWidth = 600; Desired incrementing would be in sets of 200, so that when the user clicks zoom in once, the value is 800 and the page is redrawn, twice to 1000, and so on. All of the visual elements of the page are created in javascript and are sized based on this variable. Very little is done on the HTML page visually, except for a little display organization, so if possible I'd like to be able to complete this task mainly in the javascript file. Does this make sense? Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated. My code thus far: <html> <head> <title>Practice</title> <script language="javascript"> function myScript() { var loanType = document.form1.loan.options.text if (loanType == "Bank A") { alert("Working") } } </script> </head> <body> <form name="form1"> <select id="loan" name="loan" onchange="myScript"> <option></option> <option>Bank A</option> <Option>Bank B</Option> </select> </form> </body> </html> Reply With Quote 01-08-2015, 10:52 AM #2 Primus View Profile View Forum Posts New Coder Join Date Oct 2014 Posts 92 Thanks 0 Thanked 14 Times in 14 Posts Code: <script>
function myScript()
{
var selectedIndex = document.form1.elements.loan.options.selectedIndex; // returns 0-2 in this case
var loanType = document.form1.elements.loan.options[selectedIndex].value; // returns the value of the selected item
if (loanType == "Bank A")
{
alert("Working")
}
}
</script>
<form name="form1">
<select id="loan" name="loan" onchange="myScript()">
<option></option>
<option>Bank A</option>
<option>Bank B</option>
</select>
</form>
Maybe not the best way, but it does the trick. Reply With Quote 01-08-2015, 11:43 AM #3 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts You have quite a lot of obsolete code:- 1) It is obsolete to assign a name to a form and permitted only for the sake of backwards compatibility. 2) <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). 3) Scripts should normally be placed right in front of the </body> tag. Any script can optionally go in the head if you wrap it inside a load event listener so that it can't run before the page loads. 4) Use the value of a select box option, not the text. 5) It is recommended that you place the opening brace following the function, if, else, for, while, do, switch, and try statements on the same line and not on the following line. Apart from that every Javascript statement should be followed by a semi-colon (;). It is quite possible to disregard this advice, but if you do one day it will rise up and bite you in the undercarriage. Code: <html>
<head>
<title>Practice</title>
</head>
<body>
<form>
<select id="loan" name="loan" onchange="myScript()">
<option value = "">Chosoe...</option>
<option value = "Bank A">Bank A</option>
<Option value = "Bank B">Bank B</Option>
</select>
</form>
<script type = "text/javascript">
function myScript() {
var loanType = document.getElementById("loan").value;
if (loanType == "Bank A") {
alert("Working")
}
}
</script>
</body>
</html>
If you really want to use the option text ... Code: <html>
<head>
<title>Practice</title>
</head>
<body>
<form>
<select id="loan" name="loan" onchange="myScript(this)">
<option value = "">Choose...</option>
<option value = "Bank A">Bank A</option>
<Option value = "Bank B">Bank B</Option>
</select>
</form>
<script type = "text/javascript">
function myScript(element) {
var loanType = element.options[ element.selectedIndex ].text;
if (loanType == "Bank A") {
alert("Working")
}
}
</script>
</body>
</html>
The Warrington players can hang their heads high. - Commentator, BBC Radio 2 I want to create a table in javascript with a predefined height and width and put html code in its td. I wanna know when i should stop writing html code when my table have reached the predefined height. Is there any way to do that? I started by doing this : var srcTable = document.createElement("table"); srcTable.border = 1; srcTable.borderColor = "Black"; srcTable.height = 768; srcTable.width = 1024; var tmpRow = null; var tmpCell = null; for (i = 0; i < rowCount; i++) { tmpRow = AppendRow(srcTable) for (j = 0; j < colCount; j++) { tmpCell = AppendCell(tmpRow); tmpCell.innerHTML = document.getElementById("div").innerHTML; tmpCell = null; } tmpRow = null; } The html code in "div" element is way big then 768 px. I wanna know how to loop over and break it when table reaches 768 px height. I apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail. So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.) -18 degrees Celsius: "Bundle up! It's freezing out there!" -18 - 0 degrees Celsius: "Pretty cold with a chance of snow!" 15 degrees Celsius: "Don't forget your jacket. It's still chilly out!" 16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains." 28 - 35 degrees Celsius: "Nice and warn. Go for a swim." 35 degrees Celsius: "Really hot! Best to stay in air conditioning." HELP Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages: Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!" 0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!" 33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!" 60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains." 81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim." Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning." I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly. Attached Files hourlyForecast1.txt (954 Bytes, 24 views) please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"< I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program. In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px. Please help me~~T_T Code: <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
Code: I have to create two dropdownlists that are dependent
In my first select tag there are 4 selections ,,, year,quarter,month and week.
and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..
<select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">
<option selected value="">
<option value="Yearly">Yearly
<option value="Quarterly">Quarterly
<option value="Monthly">Monthly
<option value="Weekly">Weekly
</td>
<td>.
<select name="user_defn_day" align="center">
<option selected value="">
<script type="text/javascript">
alert(this.options[this.selectedIndex].text)
for (var i = 1; i <=366; i++)
{
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
Hi, I'm very new to Javascript and I'm stuck. I am trying to create a js script that will prompt the user for a times table (example the 5 times table, the 7 times table, etc.) & prompt the user for 2 more values; the 'start' number and 'end' number. So there would be 3 numbers total the user must input. The script should present a 'warning' message if the user inputs letters or negative numbers. I have come very close to getting it too work but can't quite get past the last hurdle. Upon entering the 3 numbers, the output should look similar to this: (the 5 times table starting with 1 and ending with 12) The 5 times table 5 * 1 = 5 5 * 2 = 10 5 * 3 = 15 5 * 4 = 20 5 * 5 = 25 5 * 6 = 30 5 * 7 = 35 5 * 8 = 40 5 * 9 = 45 5 * 10 = 50 5 * 11 = 55 5 * 12 = 60 I have placed the js script code on pastebin.com and below. The pastebin link is: http://pastebin.com/2NZPiFH9 Code: function writeTimesTable(timesTable, timesByStart, timesByEnd)
{
for (;timesByStart <= timesByEnd; timesByStart++)
{
document.write(timesTable + " * " + timesByStart + " = " +
timesByStart * timesTable + "<br>");
}
}
var timesTable;
while ( (timesTable = prompt("Enter the first number in the times table. Enter -1 to exit.", -1)) != -1)
{
while (isNaN(timesTable) == true)
{
timesTable = prompt(timesTable + " is not a valid number, please retry.",-1);
}
if (timesTable == -1)
{
break;
}
document.write("<br>The " + timesTable + " times table<br>");
writeTimesTable(timesTable,1,12);
}
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);
}
How would I go about creating a random number between 1-50 that COULD include whole numbers, decimals to the tenth, hundredth and the thousandth place? Ex) 2.145, 3, 5.8, 41.002, 10.12, 7, 18.023, 33.2 Also, if the only way to do it is to put trailing zeros to the thousandth place that's fine as well ex) 2.145, 3.00, 5.800, 41.002, 10.120, 7.00, 18.023, 33.200 I need to style a checkbox, so I made it into two images behind a form with hidden inputs. On click the form takes input from the other form into the hidden fields and POSTs it. Then I use PHP to grab that POST and put it back into the original form. Here are some snippets of what I am trying to do: First form input: PHP Code: <input type="text" name="email" id="email1" value="<?php if(isset($_POST['email2'])) { echo $_POST['email2']; } ?>" style="height:25px;width:270px;" /> Second form input: PHP Code: <input type="hidden" name="email2" id="email2" /> Second form submit image button: PHP Code: <input type="image" src="img/Boxchecked.jpg" value="submit" onclick="fname2.value = fname1.value; lname2.value = lname1.value; email2.value = email1.value" width="20" height="20" /> The forms work fantastic on everything but IE, which does not save the field values. How do I fix the onclick event to save them in IE? Help is much appreciated. I have taken lots of programming classes, but am now taking my first web programming class and I am getting sooooo frustrated. I have done lots of looking on the web, but am still unable to figure out why I can not make this simple assignment work. I just need some help with getting something to happen when the user hits submit. What I really want is for a new page to appear with the message using the user inputs, but I would be very happy with just getting the input to appear in the text area that I put in or even for the alert box to pop up with the input. I can work on validation code after I can get some kind of output to work..... I posted everything (due to it's small size), including my attempts to see what is working. Here is the code I have written: Code: <html>
<head>
<title>Name and Age</title>
<script type="text/javascript">
<!--
function Submit()
{
alert("Does this do anything?");
var name = document.forms['NameAge'].elements[0];
var year = document.forms['NameAge'].elements[1];
var date = new Date();
var curr_yr = date.GetFullYear();
var age = (curr_yr - year)
alert("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
/*if (year > curr_yr)
{
alert("You must enter a valid year!");
}
else
{
document.writeln("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
}*/
document.forms['NameAge'].output.value = "<h3>Hello, " + name + ", you are " + age + " years old."</h3>";
}
-->
</script>
</head>
<body>
<h1>Name and Age</h1>
<form name="NameAge" onsubmit="Submit()">
<p align="left">Please Enter Your Name:
<input id="name" maxlength="32" size="24" />
</p>
<p align="left">Please Enter the Year You Were Born:
<input id="year" maxlength="4" size="24" />
</p>
<input type="submit" value="Submit" /><br />
<textarea cols="10" rows="3" name="output"></textarea>
</form>
</body>
</html>
Is it possible to have an input that points to some other function? For example: Code: function someFunction() {
alert('It worked.');
}
function doAnotherFunction(doIt, otherFunction) {
if (doIt == true) {
otherFunction();
}
}
<input type="button" value="test" onClick="doAnotherFunction(true, someFunction());">
Or would I need a switch statement and have all the various functions hardcoded? Need help - sorry for the novice-ness of this. Have a computed field ("Subtotal"). With that number, need to set up rule such that if Subtotal is a certain number, a certain number will print in the new field (lets call it "First"). Here's what I have so far... var a=getField("Subtotal").value; var b=5000; var c=9000; var d=33000; var e=53000; var f=68000; var g=78000; var h=83000; var i=0; Code: if (a.value<=100000){
event.value=b
}
else if (a.value<=200000 && a>100000){
event.value=c.value
}
else if (a.value<=1000000 && a>200000){
event.value=d.value
}
else if (a.value<=2000000 && a>1000000){
event.value=e.value
}
else if (a.value<=3000000 && a>2000000){
event.value=f.value
}
else if (a.value<=4000000 && a>3000000){
event.value=g.value
}
else if (a.value<=5000000 && a>4000000){
event.value=h.value
}
else if (a.value==0){
event.value=i.value
}
Any thoughts??? Help is GREATLY appreciated. D My table starts like this: Code: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive. Code: function deleteRow()
{
if(check == 'undefined')
{
return;
}
else
{
var check = document.getElementsByName('check[]'),row,nextRow,x;
var len = check.length;
for(x=len-1; x>=0; x--)
{
if(check[x].checked)
{
row = check[x].parentNode.parentNode;
while(row.nextSibling.nodeName != 'tr')
{
nextRow = row.nextSibling;
}
nextRow = row.nextSibling;
alert('ok');
}
}
}
}
Appreciate ans help with this? |
|||||||