PDA

View Full Version : insert/delete columns from table?

Tremblay
05-11-2005, 09:26 PM
The intranet site I'm working on has no backend database, so when I want to dynamically display table-based data, I do everything in Javascript.

Right now, I have all the data in Javascript arrays in the HTML files. E.g.:


NAME[1]="John";GENDER[1]="Male";CITY[1]="Denver";
NAME[2]="Bill";GENDER[2]="Male";CITY[2]="Memphis";
NAME[3]="Mary";GENDER[3]="Female";CITY[3]="Sacramento";
NAME[4]="Jill";GENDER[4]="Female";CITY[4]="New York";


Then I have forms to select different options, and then the user click "Submit" button and it will adds rows to a table for each match/result (using DOM functions like insertRow and insertCell). If the user clicks "Reset" button, it deletes all the rows from the table except the first one (header row);

That whole system works fine (a little slow when there are a lot of rows/results to display, but that's normal).

Now I have a data set where there are few rows, but a lot of columns. I don't want a side (left-right) scroll bar on the page, so I thought of turning the system 90 degrees, and add columns to the table for each result.

However they are no insertColumn function.

I've been trying to figure out a way to add/delete columns using DOM for 4 hours now and I can't think of anything...

Help!
Kor
05-13-2005, 11:42 AM
Think in HTML way... Use the cells index within the rows. If a simetric table, the first cell of the first row has the same index as the first cell in the second row and so on. Loop through a second array (rows/cells) and remove the cells which have, in their rows, the same index.
Kor
05-13-2005, 11:57 AM
Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script type="text/javascript">
function deleteC(c){
var root = c.parentNode.parentNode;//tbody or table - correction if tbody is not present
var allRows = root.getElementsByTagName('tr');// rows collection in the table
var aCells = c.parentNode.getElementsByTagName('td')//cells collection in this row
for(var j=0;j<aCells.length;j++){
if(c==aCells[j]){var q=j;break}//gets the index of this cell in this row
}
for(var i=0;i<allRows.length;i++){
allRows[i].removeChild(allRows[i].getElementsByTagName('td')[q]);//removes the correspondent cells with the same index in their rows
}
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td>c0 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c1 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c2 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
<td>c3 <a href="#" onclick="deleteC(this.parentNode)">delete this column</a></td>
</tr>
<tr>
<td>c0</td>
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
</tbody>
</table>

</body>
</html>


I'll let you the pleasere to do the inverse operation, adding a column, using the same reasoning ;) ... If you encounter problems, let me know
TNO
05-13-2005, 05:02 PM
Have you considered the TDC (Tabular Data Control) as an option?
Kor
05-16-2005, 11:22 AM
Have you considered the TDC (Tabular Data Control) as an option?
Only if there is an equivalent for Mozilla... AFAIK TDC is an IE only based on AvtiveX feature...