|
JavaScript - Html Table Adds New Row Drops The End
Hello, I have a goal in mind of creating a html table that is dynamically updated via JS. My goal is to have simple data displayed in table and have the top row replaced in intervals, which then moves all the other data down and deletes the final row.
I am in planing stage so I am searching for methods you all may know of, also what kind of html skeleton should I build, would a simple table do the trick? Do I need to attach ids to my rows? Thanks -Micah Similar TutorialsNot sure how easy this is, but I would like to have 4 checkboxes that effect the items shown in a drop down menu. For example: [x] School #1 [x] School #2 [ ] School #3 The drop down (select) box will only show the majors that are offered at the checked schools. I know this involves either hiding or showing the certain elements of the drop down menu, but I'm not well versed in JS. Thanks in advance. Hi guys, im having some trouble with a site im working on. In a nutshell, im using a navigation bar with dropdown and JS Fadeshow. When using the navbar dropdown, it goes BEHIND the fade show. If anyone could advise it would be great! I didnt attach the code as i think the best thing to do is just take a look yourself. Its alhambrarenovations. COM Thanks in advance
SoftDivScroll adds #anchorname if clicked from a different page yet it doesn't on the same page Quote: -home.php --#anchor1 services.php --#anchor2 when on home.php, you click the link for #anchor1 it doesn't add #anchor1 to the URL which is perfect. when on services.php, you click the anchor link for home.php#anchor1 you get home.php#anchor1, now when you refresh the page it scrolls to last anchor. Anyone else come accross this? Quote: one idea is an if then else or switch based on referrer, that means I need all the URLs in an array and only allow from pages within the array? emailed the developer using their contact form which seems non-working Hello, I am new to JavaScript and I am asking for help with this problem. I have a three textboxes in a form. Using OnBlur, I am attempting to call a function to add one to an input textbox to add 1 to the cost. As the user enters text into textbox01, the number 1 appears in the input box about cost, as the user enters text into textbox02, the input box displays 2 and the user enters text into textbox03, the input box displays 3. My JavaScript is as follows: <script type="text/javascript"> //copies contents of first textbox to second textbox function copyValue() { var textbox1 = document.getElementById("textbox1"); var textbox2 = document.getElementById("textbox2"); var textbox3 = document.getElementById("textbox3"); var txtAttendee = document.getElementById("txtAttendee"); var input_A = document.getElementById("input_A"); textbox2.value = textbox1.value; txtAttendee.value = 1; input_A.value = 1; } </script> In the form I have this: <input type="text" id="textbox3" style="background-color:yellow" onblur="copyValue();" /> I would greatly appreciate ANY help with being able to calculate costs, perhaps using the JavaScript ++/-- operators. Thank you in advance for your time and assistance. Sorry for my beginner question but I am having some trouble getting this to work. I am trying to create a simple I=PRT calculator so it can calculate interest. But when you run it it adds the digits. Ex. 5+100=5100 instead of 105. Give it a try. My code is bellow.[CODE] // JavaScript Document alert("This is a simple calculator which will allow you to calculate the interest on a principle."); var principle = prompt("What is the amount you would like to calculate interest for?"); var rate = prompt("What is the interest rate. eg. For 3.9% write 3.9"); var term = prompt("How long in the period under calculation going to be? eg. For 1 year write 1"); var interest = principle*(rate/100)*term; var result = principle + interest; var a = "This means the interest is going to be $"; var b = " And the total to be paid is $"; var c = a + interest + b + result; alert(c); [CODE] Thanks in advance. Hi All, I have HTML table with couple of columns with combobox in each row.when I select value in any of the combobox, I want to determine the column number of the combobox which is clicked.Is there any function which can be used to do this?Please help. Thanks, Anil Trying to put my finger on how to achieve this result. About half way down on the page linked below you'll see "Recent - Comments - Popular - Tags" this table expands when you rollover and stays expanded while allowing you to populate the different content. Any help would be greatly appreciated, not even sure if I'm in the right forum. http://thedailydisney.com/blog/2010/...magic-kingdom/ Thanks for the time. Will Dear All Please see the script below. This is a scrolling table. First row & last row are fixed, they don't moved. I also want to fixed the first two column (column1 & column2). Please help me. Code:
/* CSS Document */
table#table-body, table#table-header, table#table-footer
{
border-spacing:0;
border-collapse:collapse;
border:1px solid;
table-layout:fixed;
width:1000px;
border:1px solid #000;
}
table#table-header th
{
background:#c2a1a1;
}
table#table-footer td
{
background:#a39393;
}
table#table-body td
{
background:#e1d9d9;
}
table#table-body td, table#table-header th, table#table-footer td
{
border:1px solid #000;
width:100px;
height:30px;
overflow:hidden;
white-space:nowrap;
}
div#header-container, div#footer-container
{
overflow:hidden;
}
div#scroll
{
width:500px;
overflow:hidden;
max-height:150px;
padding-left:1px;
}
div#fake-scroll-container
{
width:500px;
overflow:hidden;
position:relative;
}
div#y-fake-scroll
{
overflow-y:scroll;
overflow-x:hidden;
background:transparent;
position:absolute;
right:0;
position:absolute;
max-height:149px;
top:31px;
}
div#x-fake-scroll
{
height:40px;
margin-top:-23px;
overflow-x:auto;
overflow-y:hidden;
margin-top:expression('0px');/* IE 7 fix*/
height:expression('17px'); /* IE 7 fix*/
}
div#y-scroll
{
max-height:150px;
overflow-y:auto;
overflow-x:hidden;
overflow:scroll;
width:1010px;
padding:0px 1px 1px 1px;
}
div#header-container
{
padding:1px 1px 0 1px;
}
div#footer-container
{
padding:0 1px;
}
Code:
// JavaScript Document
var YtableEmulator = document.getElementById('y-table-emulator');
var XtableEmulator = document.getElementById('x-table-emulator');
var table = document.getElementById('table-body');
YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
XtableEmulator.style.width = table.clientWidth + "px";
var scrollablePanel = document.getElementById('scroll');
var headerContainer = document.getElementById('header-container');
var footerContainer = document.getElementById('footer-container');
var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
var XfakeScrollablePanel = document.getElementById('x-fake-scroll');
YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
scrollablePanel.onscroll = function (e) {
XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
}
YfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
}
XfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
}
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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome</title> <link type="text/css" rel="stylesheet" href="style.css"></link> </head> <body> <div id="fake-scroll-container"> <div id="header-container"> <table id="table-header" cellpadding="0" cellspacing="0"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> <th>Column 8</th> <th>Column 9</th> <th>Column 10</th> </tr> </table> </div> <div id="scroll"> <table id="table-body" cellpadding="0" cellspacing="0"> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> <td>Cell 1.4</td> <td>Cell 1.5</td> <td>Cell 1.6</td> <td>Cell 1.7</td> <td>Cell 1.8</td> <td>Cell 1.9</td> <td>Cell 1.10</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> <td>Cell 2.4</td> <td>Cell 2.5</td> <td>Cell 2.6</td> <td>Cell 2.7</td> <td>Cell 2.8</td> <td>Cell 2.9</td> <td>Cell 2.10</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> <td>Cell 3.4</td> <td>Cell 3.5</td> <td>Cell 3.6</td> <td>Cell 3.7</td> <td>Cell 3.8</td> <td>Cell 3.9</td> <td>Cell 3.10</td> </tr> <tr> <td>Cell 4.1</td> <td>Cell 4.2</td> <td>Cell 4.3</td> <td>Cell 4.4</td> <td>Cell 4.5</td> <td>Cell 4.6</td> <td>Cell 4.7</td> <td>Cell 4.8</td> <td>Cell 4.9</td> <td>Cell 4.10</td> </tr> <tr> <td>Cell 5.1</td> <td>Cell 5.2</td> <td>Cell 5.3</td> <td>Cell 5.4</td> <td>Cell 5.5</td> <td>Cell 5.6</td> <td>Cell 5.7</td> <td>Cell 5.8</td> <td>Cell 5.9</td> <td>Cell 5.10</td> </tr> <tr> <td>Cell 6.1</td> <td>Cell 6.2</td> <td>Cell 6.3</td> <td>Cell 6.4</td> <td>Cell 6.5</td> <td>Cell 6.6</td> <td>Cell 6.7</td> <td>Cell 6.8</td> <td>Cell 6.9</td> <td>Cell 6.10</td> </tr> <tr> <td>Cell 7.1</td> <td>Cell 7.2</td> <td>Cell 7.3</td> <td>Cell 7.4</td> <td>Cell 7.5</td> <td>Cell 7.6</td> <td>Cell 7.7</td> <td>Cell 7.8</td> <td>Cell 7.9</td> <td>Cell 7.10</td> </tr> <tr> <td>Cell 8.1</td> <td>Cell 8.2</td> <td>Cell 8.3</td> <td>Cell 8.4</td> <td>Cell 8.5</td> <td>Cell 8.6</td> <td>Cell 8.7</td> <td>Cell 8.8</td> <td>Cell 8.9</td> <td>Cell 8.10</td> </tr> </table> </div> <div id="footer-container"> <table id="table-footer" cellpadding="0" cellspacing="0"> <tr> <td>Summary 1</td> <td>Summary 2</td> <td>Summary 3</td> <td>Summary 4</td> <td>Summary 5</td> <td>Summary 6</td> <td>Summary 7</td> <td>Summary 8</td> <td>Summary 9</td> <td>Summary 10</td> </tr> </table> </div> <div id="y-fake-scroll"> <div id="y-table-emulator" style="width:40px;"> </div> </div> <div id="x-fake-scroll"> <div id="x-table-emulator"> </div> </div> <script type="text/javascript" src="script.js"> </script> </div> </body> </html> Hi, I have a HTML table in a form with a submit button.In HTML table I have links present in first three rows for each columns of HTML table.I want to disable those links when user submit the form.How can I handle this in javascript? Please help. Thanks in advance. Anil. Hi There, I really need your help. How could I amend the following code below to incorporate the fieldnames on the top before displaying the values of the recordset? Ie. [FIELDNAME1] [FIELDNAME2] [FIELDNAME3] [FIELDNAME4] value1 value2 value3 value4 Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="javascript" type="text/javascript">
function getsqltable() {
var strtable = ""
var cn = new ActiveXObject("ADODB.Connection")
var rs = new ActiveXObject("ADODB.Recordset")
var dbfile = "imts.mdb"
var dbPath = "F:/PROJECTS/IMTS PROJECT/V7/database/"
cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbfile + "")
var mySQL = "SELECT * FROM tbl_imts WHERE [File Number] = 'A-2010-00301'"
rs.Open(mySQL, cn, 1, 3)
rs.MoveFirst
strtable='<table cellpadding=0 cellspacing=0 width=75%>';
while (!rs.eof)
{
strtable+='<tr>';
strtable+='<td>'+rs.fields(0)+'</td>' + '<td>'+rs.fields(1)+'</td>' + '<td>'+rs.fields(2)+'</td>' + '<td>'+rs.fields(3)+'</td>'
strtable+='</tr>';
rs.movenext;
}
strtable+='</table>';
rs.close;
cn.close;
document.getElementById('htmltable').innerHTML=strtable;
}
</script>
</head>
<body>
<input type="button" onclick="getsqltable();" value="Click Me"/>
<div id="htmltable"></div>
</body>
</html>
I've tried modifying the while code, but it puts it all on one line: Code: while (!rs.eof)
{
strtable+='<tr>';
strtable+='<td>'+rs.fields(0).Name+'</td>' + '<td>'+rs.fields(1).Name+'</td>' + '<td>'+rs.fields(2).Name+'</td>' + '<td>'+rs.fields(3).Name+'</td>'
strtable+='<td>'+rs.fields(0)+'</td>' + '<td>'+rs.fields(1)+'</td>' + '<td>'+rs.fields(2)+'</td>' + '<td>'+rs.fields(3)+'</td>'
strtable+='</tr>';
rs.movenext;
}
any ideas? Much thanks and appreciation for everyones help. Cheers and much thanks in advance, Jay Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) {
var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr');
var irows = oRows.length ;
if (confirm("Are you sure you want Submit?"))
{
for(k=1; k<=irows; k++)
{
if(document.getElementById("list"+k).selectedIndex == 0)
{
document.getElementById("list"+k).selectedIndex = 1;
document.getElementById("list"+k).options[1].style.backgroundColor = "green";
}
}
Saver();
document.getElementById("HTMLTable1").disabled = true;
}
else{
alert("Submit cancelled!");
}
}
But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil 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 Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Can't seem to figure out how to add the borders to the floating table head? The javascript file I'm using table_floating_header.js, got it from site http://code.google.com/p/js-floating...ers/wiki/Usage [code] var floating_header = function() { this.header = document.createElement('table'); this.header_height = 0; this.getkeys = function(obj) { var keys = new Array(); for ( var key in obj ) { keys.push(key); } return keys; }; this.getXY = function( o ) { var y = 0; var x = 0; while( o != null ) { y += o.offsetTop; x += o.offsetLeft; o = o.offsetParent; } return { "x": x, "y": y }; } this.setheader = function() { var win = window.pageYOffset ? window.pageYOffset : 0; var cel = document.documentElement ? document.documentElement.scrollTop : 0; var body = document.body ? document.body.scrollTop : 0; var result = win ? win : 0; if ( cel && ( ! result || ( result > cel ))) result = cel; var screenpos = body && ( ! result || ( result > body ) ) ? body : result; var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height; if ( screenpos > this.theady && screenpos < theady_max ) { this.header.style.borderCollapse= 'collapse'; this.header.style.top=Math.round(screenpos) + 'px'; this.header.style.left=this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).x + 'px'; this.header.style.display = 'block'; this.header_height = header.offsetHeight; } else { this.header.style.display = 'none'; } } this.addclass = function(obj, newclass) { if ( obj.classes == null ) { obj.classes = new Array(); } obj.classes[newclass] = 1; obj.className = this.getkeys(obj.classes).join(' '); return true; }; this.theady = 0; this.build_header = function() { this.table_obj = document.getElementsByTagName('THEAD'); if ( ! this.table_obj ) { alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen"); return; } this.table_obj = this.table_obj[0]; while ( this.table_obj.tagName != 'TABLE' ) { if ( this.table_obj.tagName == 'BODY' ) { alert('The THEAD section MUST be inside a table - how did you do that???'); return; } this.table_obj = this.table_obj.parentNode; } thead = this.table_obj.getElementsByTagName('THEAD')[0].cloneNode(1); thead.id = 'copyrow'; this.header.style.position='absolute'; this.header.style.display='none'; this.header.appendChild(thead); this.header.style.width = this.table_obj.offsetWidth; var srcths = this.table_obj.getElementsByTagName('THEAD')[0].getElementsByTagName('*'); var copyths = thead.getElementsByTagName('*'); for ( var x = 0; x < copyths.length; x++ ) { copyths[x].className = srcths[x].className; copyths[x].align = srcths[x].align; copyths[x].background = srcths[x].background; copyths[x].bgColor = srcths[x].bgColor; copyths[x].colSpan = srcths[x].colSpan; copyths[x].height = srcths[x].height; copyths[x].rowSpan = srcths[x].rowSpan; pr = Math.round(srcths[x].style.paddingRight.split('px')[0]); pl = Math.round(srcths[x].style.paddingLeft.split('px')[0]); bl = ( Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) : 0; br = ( Math.round(srcths[x].style.borderRightWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderRightWidth.split('px')[0]) : 0; pt = Math.round(srcths[x].style.paddingTop.split('px')[0]); pb = Math.round(srcths[x].style.paddingBottom.split('px')[0]); bt = Math.round(srcths[x].style.borderTopWidth.split('px')[0]); bb = Math.round(srcths[x].style.borderBottomWidth.split('px')[0]); if ( srcths[x].currentStyle ) { for ( var y in srcths[x].currentStyle ) { if ( y == 'font' || y == 'top' ) continue; copyths[x].style[y] = srcths[x].currentStyle[y]; } pr = Math.round(srcths[x].currentStyle.paddingRight.split('px')[0]); pl = Math.round(srcths[x].currentStyle.paddingLeft.split('px')[0]); bl = ( Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) : 0; pt = Math.round(srcths[x].currentStyle.paddingTop.split('px')[0]); pb = Math.round(srcths[x].currentStyle.paddingBottom.split('px')[0]); bt = Math.round(srcths[x].currentStyle.borderTopWidth.split('px')[0]); } if ( srcths[x].onclick ) copyths[x].onclick = srcths[x].onclick; var width = ( srcths[x].offsetWidth - pr - pl > 0 ) ? srcths[x].offsetWidth - pr - pl : 0; copyths[x].style.position = srcths[x].style.position; copyths[x].style.top = ( srcths[x].offsetTop - pt - pb > 0 ) ? srcths[x].offsetTop - pt - pb : srcths[x].offsetTop; copyths[x].style.top = srcths[x].style.top; copyths[x].style.height = srcths[x].offsetHeight; copyths[x].style.left = srcths[x].offsetLeft; if ( ! copyths[x].currentStyle ) { //copyths[x].style.width = Math.floor(document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width").split('px')[0]); copyths[x].style.width = document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width"); } else { copyths[x].style.width = srcths[x].offsetWidth - pr - pl; // - bl; copyths[x].width = srcths[x].width; } if ( x == copyths.length - 1 ) { this.header.style.paddingBottom = pb; this.header.style.borderBottom = bb; } } this.addclass(this.header, 'main'); document.body.appendChild(this.header); theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y; } var origonload = window.onload; window.onload = function() { if (origonload) { origonload(); } this.build_header(); }; window.onscroll=this.setheader; }; floating_header(); [code] HTML example page code [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <!-- <meta HTTP-EQUIV='REFRESH' CONTENT='60'> --> <script src="table_floating_header.js"></script> </head> <body> <table border=2 cellspacing=0 cellpadding=0 width=990 align=center> <thead> <tr> <td colspan=13 bgcolor='palevioletred'>Title of Page - 12APR12--09:01</th> <td colspan=3 bgcolor='palevioletred'>More Text</th> </tr> <tr> <th colspan=13 bgcolor='wheat'>More Text</th> <th colspan=3 bgcolor='wheat'><font size=1.0>Date </th> </tr> <tr> <td colspan=13 bgcolor='wheat'align=center><a href='l'> Link</td> <th colspan=3 bgcolor='wheat'><font size=1.0>End 13APR12  </th> </tr> <tr> <th colspan=3 bgcolor='peachpuff'>Text</th> <th colspan=3 bgcolor='peachpuff'>Text</th> <th colspan=1 bgcolor='wheat'></th> <th colspan=6 bgcolor='peachpuff'>Text</th> <th colspan=3 bgcolor='wheat'><font size=1.0>Curr 12APR12 </th> </tr> <tr bgcolor=peachpuff> <th colspan=3></th> <th colspan=3></th> <th colspan=1 bgcolor='wheat'></th> <td></td> <td></td> <td></td> <td align=center><b>Text</td> <td></td> <td></td> <td colspan=3 bgcolor='wheat'></td> </tr> <tr bgcolor='peachpuff'> <td><b>Text</td> <td ><b>Text</td> <td><b>Text</td> <td align=center><b> Text </td> <td align=right><a href=''> Link Text </td> <td align=right><b> Text </td> <th colspan=1 bgcolor='wheat'></th> <td align=center><b> Text </td> <td align=right><a href=''> Link Text </td> <td align=right><b> Text </td> <td align=center><b> Text </td> <td align=center><b> Text</td> <td align=right><a href=''> Link Text </td> <td align=center><b>Text </td> <td align=center> <a href=''> Link Text </td> <td align=center><b>Text</td> </tr> <tr> </thead> <tbody> <td>1</td> <td> </td> <td> </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>2</td> <td>Text </td> <td>Text </td> <td align=right> 21</td> <td align=right> 0</td> <td align=right> 6</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 24</td> <td align=right> 0</td> <td align=right bgcolor=RED> 21</td> <td align=right bgcolor=RED> 0% </td> <td align=right> 0</td> </tr> <tr> <td>3</td> <td>text </td> <td>text </td> <td align=right> 44</td> <td bgcolor=green align=right> 204</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 248</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>4</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>5</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 6</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>6</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td align=right> 4</td> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 4</TD> <td align=right> 0</td> <td align=right> 0</td> <td align=right> 0</td> <td align=center> - </td> <td align=center> - </td> </tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=BLUE> 85% </td> <td align=right> 3</td> </tr> <tr> <td>7</td> <td>text </td> <td>text </td> <td align=right> 0</td> <td align=right> 47</td> <td align=right> 4</td> <th colspan=1 bgcolor='wheat'></th> <td bgcolor=yellow align=right> 7</td> <td align=right> 0</td> <td align=right> 8</td> <td bgcolor=GREEN align=right> -1</TD> <td align=right> 20</td> <td align=right> 17</td> <td align=right> 47</td> <td align=right bgcolor=RED> 85% </td> <td align=right> 3</td> </tr> </tbody> </table> </body> </html> [code] I'm using both Firefox and IE Thanks! Code: <script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){
alert("Please Select Sex"); return false;}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
if(total=="")
alert("select scripts") else
alert (total)
return false;
} </script>
<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>
<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript <input type=checkbox name=scripts value='PHP'>PHP <input type=checkbox name=scripts value='HTML'>HTML </td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
In this code a checkbox is accessed as "document.form1.scripts[i].checked" If we see the tree view of this document, it is "table/form1/tr/td/scripts[i].checked" SO are we not required to add table elements in the path to the checkbox ? I guess its not required. But why ? Because cell, row and table are the parent elements in HTML tree, then why are they not required ? Hello All, I'm working on a project which requires a small portion from a large table of information to be displayed on a webpage (sort of like a magnifying glass). The display will be a table of fixed size (m by n cells). Some of the cells will be merged. When the table updates, different sets of cells may be merged. It needs to be coded in HTML5, which I assume includes the use of JavaScript and CSS (The specs of this is rather unclear at the moment, so I'm going to cover all bases). Anyhow, looking through the HTML5 and JavaScript tutorials, I found two ways to solve this problem. One way would be to have a script to parse out the relevant information, and have it output into a table (dynamically generating the HTML required). The second way would be to have the script draw the table on its own in a canvas. User events (such as arrow keys on the keyboard) will change the position of the focus (move the magnifying glass in a cardinal direction). I hit a small snag with the first solution - Is it possible to update the table on the page (including changing the structure of it) without having to refresh? If you could point me to a relevant tutorial or example on the web, I'd greatly appreciate it. I am trying to create a simple HTML table with the squares of numbers and for some reason the loop is not triggering. Code: Code: <table border="1">
<tr><td><h2>Table of Squares</h2></td></tr>
<tr><td>
Number
</td>
<td>
Square
</td></tr>
<tr>
<script language="JavaScript">
for(i = 1, fact = 1; i < 10; i++, fact = i*i) {
document.write("<td>" + i + " </td><td> " + fact + "</td>);
document.write("</tr><tr>");
}
document.write("</tr></table>");
</script>
When I run the page all that comes up is the start of the table that is written before the script executes. Also is there any way I could use a debugger to catch this on my own? I tried the firefox debugger but it didn't catch anything when I ran it through, maybe I was just doing it wrong. Any help is appreciated thanks! Hello, I'm dynamically outputting the contents of a MySQL table using Python, to a HTML table, which users view (obviously) through a web browser. It looks great, but the problem is that I'd like users to be able to update these values. For example, I have the current value of certain fields in text boxes. I'd like users to be able to change those values, then hit a submit button or similar (ideally on-the-fly) to update the dB. I imagine javascript will need to pass values to a Python script, but I don't know what the best way to go about this is. The table is generated with a loop like so: Code:
# Python code embedded in a .psp file
cursor = db.cursor()
cursor.execute("SELECT from_name, from_address, project, orb_proj, app, tier, environment, network, security_zone, datacenter, server_type, num_servers, date, status FROM requests")
rows = cursor.fetchall()
for row in rows:
new_row = """
<td>%s<br></td>
... (line repeated for each column)
""" % row[0:15]
req.write(new_row)
Any ideas? Maybe this whole thing should be rewritten in something else. Thanks! |
|||||||