|
JavaScript - Determining Column No In Html Table
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 Similar TutorialsDear 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> I am attempting to sync the column widths of two tables. Currently, I have a working method that uses the DOM to traverse each cell of a given row of two tables and set the style.width element to the largest offsetWidth of the the two cells. However, when the divs my tables are in are given an overflow: auto property, causing scrollbars, the widths no longer sync. They style.width elements are still being set (I'm using a debugging method to check the style.width elements for their values), but no sizes are changing. Ideas? ASPX Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@language = "C#" inherits="APTEIT.Default"%>
<!--
Default.aspx
Author: Steven T. Norris Created: 2/28/2012
Last Updated: Updated By:
Default page of APTEIT
-->
<link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/>
<script type="text/javascript" src="Utilities/Javascript/Utilities.js"></script>
<script type="text/javascript" src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
HtmlLoggerControlInstance.getInstance().setLevel("debug",HtmlLogger.ALL);
syncColumnWidths("headers",null,"data",null);
});
</script>
<html>
<head>
<title>APTEIT</title>
</head>
<body>
<!--#include file="Utilities/Debug.aspx"-->
<img src="Images/logo.png" />
<div id="headersDiv">
<table class="tbl" id="headers">
<tr>
<td>head1</td>
<td>head2reallyreallylong</td>
<td>hd3</td>
<td>4</td>
</tr>
</table>
</div>
<div id="dataDiv" onscroll="syncScrolling('dataDiv','headersDiv');">
<table class="tbl" id="data">
<tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr>
<tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdasdfaf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdja;lksdjaljkdfs</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr><tr>
<td>alsdf</td>
<td>kdki</td>
<td>k39</td>
<td>lsjdl</td>
</tr>
</table>
</div>
</body>
</html>
CSS Code: /*
APTEIT.css
Author: Steven T. Norris Created: 2/28/2012
Updated By: Last Updated:
Copyright 2012
CSS stylesheet for default page of APTEIT
*/
/*Utilities Styles*/
.debug
{
display:block;
}
.LOG_INFO
{
color:blue;
}
.tbl
{
border-collapse:collapse;
}
.tbl tr td
{
border-width:1px;
border-color:black;
border-style:solid;
}
#headersDiv
{
max-width:200px;
overflow:hidden;
}
#dataDiv
{
max-width:200px;
overflow:auto;
}
#headers
{
table-layout:fixed;
}
#data
{
table-layout:fixed;
}
Javascript Code: /*
Utilities.js
Author: Steven T. Norris Created: 3/2/2012
Updated By: Last Updated:
Copyright 2012
Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/
/*
Syncs column sizes between two tables.
@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow ,table2, table2HeadRow){
UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
&& (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
tableOne = document.getElementById(table1);
tableTwo = document.getElementById(table2);
//Set row to check and get row
if(table1HeadRow == null){
t1Start = 0;
}
else{
t1Start = table1HeadRow;
}
if(table2HeadRow == null){
t2Start = 0;
}
else{
t2Start = table2HeadRow;
}
t1Row = tableOne.rows[t1Start];
t2Row = tableTwo.rows[t2Start];
//Get end number
if(t1Row.cells.length < t2Row.cells.length){
tEnd = t1Row.cells.length;
}
else{
tEnd = t2Row.cells.length;
}
//Sync widths
for(i = 0; i < tEnd; i++){
UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+" t2 width:"+t2Row.cells[i].offsetWidth);
if(t1Row.cells[i].offsetWidth > t2Row.cells[i].offsetWidth){
t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width);
}
else{
t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width);
}
}
}
else{
alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
}
UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}
/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div
@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
$("#"+div2).scrollLeft($("#"+div1).scrollLeft());
}
else{
alert("syncScrolling takes parameters (string, string)");
}
}
Some background might better help my actual problem. Feel free to address either with any relevant insights. While attempting to create a greasemonkey script in FF2 (don't ask), I discovered that the "let" statement was causing my code to fail. After confirming that this statement has been available since FF2 (js engine 1.7) https://developer.mozilla.org/en/New_in_JavaScript_1.7, I became curious as one determines their javascript engine in FF. IE has a way to inspect the jscript engine, ala http://msdn.microsoft.com/en-us/libr...8VS.80%29.aspx , but I couldn't find anything similar for FF. Feel free to list links for testing engines in other browsers, too. I can't use irc at work, so it's good to know this place is still around for numb-nuts like me. :-) Many, many thanks (in-advance). Hello All, I am a JS newbie and I'm wondering if there a way to figure out the sentence from which a word has been highlighted. Essentially, when a user selects a word or a phrase, I should output the sentence from which it's been selected. Is this possible with JS or with any server side languages? - Pallav 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>
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 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 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 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"); } 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 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 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 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. 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! I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Hey, i am just trying to learn javascript and my friend gave me a little assignment to try and figure out. i am having trouble figuring it out and need some help. basically i just want to display the information in my associative array, into an html table. var NFC_east = new Array(); NFC_east[0]=["Giants", 16, 0, "Eli Manning"]; NFC_east[1]=["Cowboys", 0, 16, "Tony Romo"]; NFC_east[2]=["Redskins", 0, 16, "Donnovan McNabb"]; NFC_east[3]=["Eagles", 0, 16, "Mike Vick"]; that's my array. now i need to display that in a table with a Team column, wins column, loses column, and a quarterback column. i basically want to do this using a for loop, and he gave me a hint about using a nested while loop as well somehow. i know i need to use getElementById, id, and innerHTML stuff but i just don't know how to do it. i cant find anything to help me with this simple task, hoping someone here could help. Hi All, I have a HTML table with combobox option in one of the column.when I select a value in dropdown the background color changes to red or green based on the selction.My Code looks like : Code: function OnHTMLTable1_ClickLink ( ) {
var irows = document.getElementById("HTMLTable1").getElementsByTagName('tr');
var iRowCount = irows.length;
for(i=0; i<=iRowCount; i++)
{
if(document.getElementById("list"+i).selectedIndex == 1)
{
document.getElementById("list"+i).options[1].style.backgroundColor = "green";
}
if(document.getElementById("list"+i).selectedIndex == 2)
{
document.getElementById("list"+i).options[2].style.backgroundColor = "Red";
}
}
}
When I select a value it is throwing me "Object Required error".Can anyone tell me where this code is misbehaving? Thanks, Anil |
|||||||