Advertisement

10.07.2008 at 03:27PM PDT, ID: 23795606 | Points: 500
[x]
Attachment Details

hide show of columns in a table

Asked by vidhubala in JavaScript

Tags:

table with hide and show of columns. prev and next hides and shows the columns in an order.
the code works fine if the table is normal with equal number of columns in every row.
if we have colspan in tds it fails. is it possible on the run time to break the columns into equal number with colspan to fix it?
or any other idea? the functionality scrollLeft doesnt work in all the browsers.
pl help.Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:

<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var visibleCells=5;
var _table=null;
var _prev=0;
var _cellCount=0;
var _rowCount=0;
window.onload=init; 
function init(){
        _table=document.getElementById("theTable");
        _rowCount=_table.rows.length;
        _cellCount=_table.rows[0].cells.length; 
}
function prev(){
        if( (_prev-1) > -1 )
        {
                --_prev;
                var _next=_prev+visibleCells; 
                for( var h=0; h < _rowCount; ++h)
                {
                        for( var i=0; i < _cellCount; ++i)
                        {
                                if(_prev<=i && i <_next)
                                {
                                        _table.rows[h].cells[i].style.display='';
                                }
                                else
                                {
                                        _table.rows[h].cells[i].style.display='none';
                                }
                        }
                }
        }
return false;
} 
function next(){
        if( (_prev+1) <= (_cellCount-visibleCells) )
        {
                ++_prev;
                var _next=_prev+visibleCells; 
                for( var h=0; h < _rowCount; ++h)
                {
                        for( var i=0; i < _cellCount; ++i)
                        {
                                if(_prev<=i && i <_next)
                                {
                                        _table.rows[h].cells[i].style.display='';
                                }
                                else
                                {
                                        _table.rows[h].cells[i].style.display='none';
                                }
                        }
                }
        }
return false;
}
</script>
</head>
 
<body>
<div><h4><a href="#" onclick="return prev()">prev</a>  <a href="#" onclick="return next()">next</a></h4></div>
<table id="theTable" width="1000" border="1" cellpadding="2">
  <tr>
    <td width="100">1</td>
    <td width="100">2</td>
    <td width="100">3</td>
    <td width="100">4</td>
    <td width="100">5</td>
    <td width="100" style="display:none">6</td>
    <td width="100" style="display:none">7</td>
    <td width="100" style="display:none">8</td>
    <td width="100" style="display:none">9</td>
    <td width="100" style="display:none">10</td>
  </tr>
  <tr>
    <td>fsdfsd</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td style="display:none" colspan="2">11</td>
    <td style="display:none">13</td>
    <td style="display:none">14</td>
    <td style="display:none">15</td>
  </tr>
  <tr>
    <td>fsdfsd</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td style="display:none">21</td>
    <td style="display:none" colspan="4">22</td>
  </tr>
  <tr>
    <td>fsdfsd</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td style="display:none">31</td>
    <td style="display:none">32</td>
    <td style="display:none">33</td>
    <td style="display:none">34</td>
    <td style="display:none">35</td>
  </tr>
  <tr>
    <td>fsdfsd</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td style="display:none">41</td>
    <td style="display:none">42</td>
    <td style="display:none">43</td>
    <td style="display:none">44</td>
    <td style="display:none">45</td>
  </tr>
  <tr>
    <td>fsdfsd</td>
    <td>fsdfsd</td>
    <td>sfdsf</td>
    <td>ffsf</td>
    <td>fsfsd</td>
    <td style="display:none">51</td>
    <td style="display:none">52</td>
    <td style="display:none" colspan="3">53</td>
   </tr>
</table>
</body>
</html>
 
Keywords: hide show of columns in a table
Title
1 HTML, Firefox 2.0, colspan in tabl…
2 html table colspan
3 Changing the colspan of a column
4 hide and show
5 colspan?
6 making a div stretch across colspans
 
Loading Advertisement...
 
[+][-]10.08.2008 at 05:04PM PDT, ID: 22674524

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.08.2008 at 05:09PM PDT, ID: 22674542

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.08.2008 at 06:58PM PDT, ID: 22675079

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.08.2008 at 11:27PM PDT, ID: 22676065

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.09.2008 at 11:17AM PDT, ID: 22681003

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.09.2008 at 11:40AM PDT, ID: 22681181

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.18.2008 at 06:12PM PDT, ID: 22750474

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10.19.2008 at 12:02PM PDT, ID: 22753318

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10.19.2008 at 02:38PM PDT, ID: 22753830

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628