|
JavaScript - Output Recordset To Html Table
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 Similar TutorialsHi There, I need your help. I am capable of getting all the field headers in my excel document but am now unable to get their respective field values. Any idea as to what I am doing wrong? Code: //========================================================================
function v8_export() {
//========================================================================
var excel = new ActiveXObject("Excel.Application")
var book = excel.Workbooks.Add()
var sheet = book.Sheets(1);
//sheet.Range("A2").Value = "Hello World"
//WRITE COLUMN HEADERS:
sheet.Columns("A:P").ColumnWidth = '15'
for (var c = 0; c < rs.fields.count; ++c) {
sheet.Cells(4, c + 1).Value = rs.fields(c).name
}
//WRITE FIELD VALUES:
var row = 1
for (var c = 0; c < rs.fields.count) {
sheet.range('A' + row).value = rs.fields(c).value
row = row + 1
}
rs.MoveNext
excel.Visible = true
}//end of function v8_export()
Thanks. J Hello, Quick question for y'all, Using javascript coding, how can you check if a recordset exists? if (rs) { alert("yup the rs is active alright") } this does not work, Any ideas? thanks, Jay Hi! I'm start learning javascript and can't solve one problem. I need to case user click first radiobutton browser show him first form ($mat1), else second. For example, I have this php code: PHP Code: $mat1="<span id="form_notes_text">".$saved_info."</span><br>\ <input class=\"form_notes_element\" value="0" type="text" name="name" maxlength="9"><br><br>\ <span id="form_notes_text">".$price_info."</span><br>\ <input class=\"form_notes_element\" type=\"text\" name=\"name2\" maxlength\"9\"><br><br>"; $mat2="<span id="form_notes_text">".$saved_info."</span><br>\ <input class=\"form_notes_element\" value="0" type="text" name="name" maxlength="9"><br><br>\ <span id="form_notes_text">".$price_info."</span><br>\ <input class=\"form_notes_element\" type=\"text\" name=\"name2\" maxlength\"9\"><br><br>"; echo "<span id=\"form_notes_text\">$add_title</span><br> <input class=\"form_notes_element\" type=\"text\" name=\"name\" maxlength=\"30\"><br><br> <span id=\"form_notes_text\">$material_type</span><br> <input type=\"radio\" name=\"type\" value=\"1\" checked onclick=\"document.getElementById('add_form').innerHTML = $mat1\">Value 1<br> <input type=\"radio\" name=\"type\" value=\"2\" onclick=\"document.getElementById('add_form).innerHTML = $mat2\">Value 2<br><br><br>"; But it doesn't work. What am I doing wrong? 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 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 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 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 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 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 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! 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"); } 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! I need some help making a button function do what I want it to do. I have a index page that shows all my projects in a table with tabs you can click on that shows certain parts of all projects (ie tab for finance, project title). For now, every single project is shown on the website when you bring up the index page. Also the top part of the page, where I have the issue, there is a drop down list of all the projects with a "GO" button next to it. I want a user to be able to scroll down that list and click the button and the page would only show that particular project, ie choosing the tabs to go back and forth dealing with the one project only. The tabs are each its own .php file with the exact coding in all of them. Here is what I have on my index page that I need help on in order to make this button work. Any help will be appreciated. My main issue is this coding Code: <input type="button" value="GO" name="proj_list" /> But here is the whole index page Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2009 Events</title>
<link rel="stylesheet" type="text/css" href="../css/dddropdownpanel.css" />
<link rel="stylesheet" type="text/css" href="../css/sortable.css" />
<link rel="stylesheet" type="text/css" href="../css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/chromestyle.css" />
<link rel="stylesheet" type="text/css" href="../css/ajaxtabs.css" />
<script type="text/javascript" src="../includes/datepicker.js"></script>
<script language="javascript" src="../includes/tablesort.js"></script>
<script language="javascript" src="../includes/tableActions.js"></script>
<script language="javascript" src="../includes/chrome.js"></script>
<script language="javascript" src="../includes/ajaxtabs.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<?php include("../header.php"); ?>
</div>
<div id="navbar2">
<?php include("../menu.php"); ?>
</div>
<div id="content">
<div id="breadcrumb">
<script language="javascript" src="../includes/breadcrumbs.js"></script>
</div>
<?php
// If the user wants to add a project
if (isset($addproject)):
else:
$dbcnx = @mysql_connect("xxxxx", "xxxxxx", "xxxxxxxx");
if (!$dbcnx) {
echo( "<P>Unable to connect to the xxxxxxxxx" .
"database server at this time.</P>" );
exit();
}
mysql_select_db("techweb", $dbcnx);
if (! @mysql_select_db("techweb") ) {
echo( "<P>Unable to connect to the xxxxxxx" .
"database at this time.</P>" );
exit();
}
// If a project has been submitted,
// add it to the database.
if ("SUBMIT" == $proj_submit) {
$sql = "INSERT INTO projects SET " .
"proj_priority='$priority', " .
"proj_title='$title', " .
"proj_bdlead='$bdlead', " .
"proj_englead='$englead', " .
"proj_objective='$objective', " .
"proj_capability='$capability', " .
"proj_approach='$approach', " .
"proj_venue='$venue', " .
"proj_tradeshow='$tradeshow', " .
"proj_funding='$funding', " .
"proj_src-ds='$src-ds', " .
"proj_src-cap='$src-cap', " .
"proj_src-irad='$src-irad', " .
"proj_status='$status', " ;
if (mysql_query($sql)) {
echo("<P>Your project has been added.</P>");
} else {
echo("<P>Error adding submitted project: " .
mysql_error() . "</P>");
}
}
echo("<h1 style='text-align:left'> 2009 Projects </h1>");
// Request the text of all the projects
$result = mysql_query(
"SELECT * FROM projects");
if (!$result) {
echo("<P>Error performing query: " .
mysql_error() . "</P>");
exit();
}
?>
<form id="projects" method="post" action="project.php">
<select id="project_list" name="proj_list">
<optgroup label="projects">
<?php
// Display the details of each event in a table
while ( $option = mysql_fetch_array($result) ) {
echo("<option label=" . $option["proj_title"] .
"value=" . $option["ID"] . ">" . $option["proj_title"] . "</option>");
}
?>
</optgroup>
</select>
<input type="button" value="GO" name="proj_list" />
<?
endif;
?>
<div id="tabcontainer">
<ul id='tabs' class='shadetabs'>
<?php
// Populate tabs with data related to the selected project
echo ("<li><a href='project.php' rel='container' class='selected'>Project</a></li>");
echo ("<li><a href='capability.php' rel='container'>Demo Capability</a></li>");
echo ("<li><a href='approach.php' rel='container'>Approach</a></li>");
echo ("<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>");
echo ("<li><a href='financials.php' rel='container'>Financials</a></li>");
?>
</ul>
<!--
<ul id='tabs' class='shadetabs'>
<li><a href='project.php' rel='container' class='selected'>Project</a></li>
<li><a href='capability.php' rel='container'>Demo Capability</a></li>
<li><a href='approach.php' rel='container'>Approach</a></li>
<li><a href='venue.php' rel='container'>Venue/Trade Shows</a></li>
<li><a href='financials.php' rel='container'>Financials</a></li>
</ul>
-->
<div id="divcontainer" style="border:1px solid gray; width:600px; margin-bottom: 1em; padding: 5px">
<p>Please select a project using the drop-down menu above. Use the tabs to view information about the selected project.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "divcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</div>
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! 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 ? So I've now made the layout of my website and I need to know how to position a javascript date I made, in a html table. This is the basic "var d=new date();" code I'm trying to implement in the menu section of my website. Also, I need to know how to do this using an external javascript file.
|
|||||||