Menu
Greetings,
I have a problem that I am sure others have already solved. The problem is that I need to present a table with forms. I cannot put the entire table into one form as there as some very real limitations on the server concerning the number of input elements. I cannot have a form per row as the FORM element is not a legal element within the TR element, nor within the TABLE element.
There are customer restrictions on the way the data are displayed, so I cannot have each row as a visibly different table.
Briefly, the form needs to look sort of like this (yeah, this isn’t code, but it displays like what I want in this question):
[CODE]
[B]Header1 Header2 Header3 Header4[/B]
Data1 Data2 Data3 Data4
DataA DataB DataC DataD [B]Submit[/B]
Data1 Data2 Data3 Data4
DataA DataB DataC DataD [B]Submit[/B]
Data1 Data2 Data3 Data4
DataA DataB DataC DataD [B]Submit[/B]
…
Currently, I have implemented this as a series of tables, of one row each, with the Submit button on the right for those rows that are actually forms (see the code below). When presented “raw”, this looks awful as the columns do not align. Some Javascript fixes that but it has serious limitations. Very serious.
So, given what it looks like, how can I do this “properly”?
Brace yourself, here’s a sample of the encoded table/form. It has passed validation so you should be able to Cut&Paste and view it with a browser.
(Sorry I don’t have a site to download it from)
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Example of Dense Form/Table</title>
<style type=”text/css”>
<!–
INPUT { font-size: small; }
TD.Data { border: thin solid; }
TH.Data { border: thin solid; }
TABLE.Data { border-collapse: collapse; text-align: left; font-size: small; }
–>
</style>
</head><body>
<noscript>
<h1>Your browser <strong>must</strong> support JavaScript for this page to be properly displayed!</h1>
</noscript>
<script type=”text/javascript” language=”javascript”>
window.onresize = getColWidths;
window.onload = getColWidths;
var hasInnerText = false; // IE different from Mozilla for getting text strings
function forceMinWidth()
{
// true for IE, false for mozilla/firefox
hasInnerText = (document.getElementsByTagName(“body”)[0].innerText != undefined) ? true : false;
var myRows = document.getElementsByTagName(“tr”);
for(var j in myRows) // set each column width to same value to enforce line-up
{
var name = myRows[j].id;
if(name && name.match(“^(headRow|row_\d+)$”))
{
var cells = myRows[j].cells;
for(var i = 0; i < (cells.length – 1); i++)
{
//cells[i].width = maxWidths[i] – 3;
cells[i].style.width = “10px”;
cells[i].noWrap = false;
}
}
}
}
function getColWidths() // align columns on multiple tables to feign a single table. Sigh.
{
forceMinWidth();
// true for IE, false for mozilla/firefox
hasInnerText = (document.getElementsByTagName(“body”)[0].innerText != undefined) ? true : false;
var maxWidths = new Array(11);
for(var i = 0; i < maxWidths.length; i++)
{
maxWidths[i] = 0;
}
var myRows = document.getElementsByTagName(“tr”);
for(var j in myRows) // find max width for each column
{
var name = myRows[j].id;
// Only look at the table header and threshold data rows
if(name && name.match(“^(headRow|row_\d+)$”))
{
var cells = myRows[j].cells;
var cMsg = “Cell offsetWidths for ” + name + ” “;
for(var i = 0; i < (cells.length – 1); i++)
{
if(maxWidths[i] < cells[i].offsetWidth)
maxWidths[i] = cells[i].offsetWidth;
}
}
}
for(var j in myRows) // set each column width to same value to enforce line-up
{
var name = myRows[j].id;
if(name && name.match(“^(headRow|row_\d+)$”))
{
var cells = myRows[j].cells;
for(var i = 0; i < (cells.length – 1); i++)
{
//cells[i].width = maxWidths[i] – 3;
cells[i].style.width = “” + (maxWidths[i] – 3) + “px”;
if(hasInnerText)
{
// IE has different rendering rules
cells[i].style.width = “” + (maxWidths[i] – 5) + “px”;
}
else
{
// Mozilla/Seamonkey/Firefox
cells[i].style.width = “” + (maxWidths[i] – 3) + “px”;
}
cells[i].noWrap = true;
}
}
}
}
function getText(aCell)
{
// hasInnerText = (document.getElementsByTagName(“body”)[0].innerText != undefined) ? true : false;
var value = hasInnerText ? aCell.innerText : aCell.textContent;
return value;
}
function submitform(rowID,formID)
{
if (confirm (“You really want to do this?”))
{
return true;
}
return false;
}
</script>
<table class=”Data” border=”0″>
<tr id=”headRow” style=”text-align: center;” class=”Data”>
<th class=”Data” nowrap=”nowrap”>Label</th>
<th class=”Data” nowrap=”nowrap”>Type</th>
<th class=”Data” nowrap=”nowrap”>Major Low</th>
<th class=”Data” nowrap=”nowrap”>Minor Low</th>
<th class=”Data” nowrap=”nowrap”>Value</th>
<th class=”Data” nowrap=”nowrap”>Minor High</th>
<th class=”Data” nowrap=”nowrap”>Major High</th>
<th class=”Data” nowrap=”nowrap”>Hysteresis</th>
<th class=”Data” nowrap=”nowrap”>Range Low</th>
<th class=”Data” nowrap=”nowrap”>Range High</th>
<th style=”border: medium none ;”> </th>
</tr>
</table>
<table class=”Data” border=”0″>
<tr id=”row_1″>
<td class=”Data” nowrap=”nowrap”>PsOk</td>
<td class=”Data” nowrap=”nowrap”>6</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>0 (ok)</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td style=”border: medium none ;”> </td>
</tr>
</table>
<form name=”ModThresholds_2″ action=”/ModuleThresholds.html?ModuleID=4.12″ method=”post” style=”margin: 0pt;” onsubmit=”javascript: return submitform(‘row_2′,’ModThresholds_2’)”>
<table class=”Data” border=”0″>
<tr id=”row_2″>
<td class=”Data” nowrap=”nowrap”>OutPwr</td>
<td class=”Data” nowrap=”nowrap”>1</td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMajorLowLimit(4.12.2)” size=”9″ value=”-1″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMinorLowLimit(4.12.2)” size=”9″ value=”-0.7″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”>2 (ok)</td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMinorHighLimit(4.12.2)” size=”9″ value=”0.7″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMajorHighLimit(4.12.2)” size=”9″ value=”1″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almHysteresis(4.12.2)” size=”9″ value=”0.1″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”>-3276.8</td>
<td class=”Data” nowrap=”nowrap”>3276.7</td>
<td style=”border: medium none;”><input style=”background: lightblue none;” value=”Apply” type=”submit”></td>
</tr>
</table>
</form>
<table class=”Data” border=”0″>
<tr id=”row_3″>
<td class=”Data” nowrap=”nowrap”>IntPs</td>
<td class=”Data” nowrap=”nowrap”>6</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>0 (ok)</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td class=”Data” nowrap=”nowrap”>N/A</td>
<td style=”border: medium none ;”> </td>
</tr>
</table>
<form name=”ModThresholds_6″ action=”/ModuleThresholds.html?ModuleID=4.12″ method=”post” style=”margin: 0pt;” onsubmit=”javascript: return submitform(‘row_6′,’ModThresholds_6’)”>
<table class=”Data” border=”0″>
<tr id=”row_6″>
<td class=”Data” nowrap=”nowrap”>LasBias</td>
<td class=”Data” nowrap=”nowrap”>1</td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMajorLowLimit(4.12.6)” size=”9″ value=”-2″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMinorLowLimit(4.12.6)” size=”9″ value=”-1″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”>2 (ok)</td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMinorHighLimit(4.12.6)” size=”9″ value=”-0.01″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almMajorHighLimit(4.12.6)” size=”9″ value=”-0.001″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”><input name=”p2almHysteresis(4.12.6)” size=”9″ value=”0.001″ type=”text”></td>
<td class=”Data” nowrap=”nowrap”>-32.768</td>
<td class=”Data” nowrap=”nowrap”>32.767</td>
<td style=”border: medium none;”><input style=”background: lightblue none” value=”Apply” type=”submit”></td>
</tr>
</table>
</form>
</body></html>