Question : HTML Cellindex showing wrong index while display:none

Dear All,

I have a problem related to HTML cellindex property. Please review the code snippet attached. For a particular cell in my table the cell index should be 8. But in IE 6, it is showing as 5. In Google Chrome and Firefox, this index is showing correctly and that is 8.

I checked the code and found that some of the cells are set to display none. All the cells with display none is showing as index 5. Because till index 4 there are visible columns.

Please advice what can I do it to show correct index in IE?

Regards 
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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="Javascript">
	
function SetInnerText(pRow, pTD, pValue)
{
  //if (pRow.cells(pTD.cellIndex + 1).style.display == "")
    //pTD.innerText = pValue;
  if (pTD.id == "tdFinalVarianceTotalProforma") alert(pTD.cellIndex);			
}

function Setme()
{
  SetInnerText(trProformaRow,tdFinalVarianceTotalProforma,"wqE");
}

</script>
	
</head>

<body>
<table border="1" id="tblProforma" cellspacing="0" cellpadding="0" style="margin-left: 2">
  <thead>
  <tr id="trProformaRow">
    <td width="100">&nbsp;Service Group&nbsp;</td>
    <td width="123">&nbsp;Service&nbsp;</td>
    <td width="50">&nbsp;BLT&nbsp;</td>
    <td width="50">&nbsp;Proforma&nbsp;</td>
    <td width="50">&nbsp;Variance&nbsp;</td>
    <td width="120">&nbsp;Comment&nbsp;</td>
    <td width="50">&nbsp;Close Estimate&nbsp;</td>
    <td width="50">&nbsp;Actual&nbsp;</td>
    <td width="50">&nbsp;Variance&nbsp;</td>
    <td width="120">&nbsp;Comment&nbsp;</td>
  </tr>
  </thead>
  <tbody>
  <tr>    
    <td width="100">&nbsp;</td>
    <td width="120">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="125">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="125">&nbsp;</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td id="tdTotals">&nbsp;Totals:</td>
    <td id="tdService">&nbsp;</td>
    <td id="tdBLTAmountTotalProforma" style="display:none">&nbsp;</td>
    <td id="tdFinalProfTotalProforma">&nbsp;</td>
    <td id="tdInitVarianceTotalProforma">&nbsp;</td>
    <td id="tdComment" style="display:none">&nbsp;</td>
    <td id="tdCloseEstimateTotalProforma">&nbsp;</td>
    <td id="tdActualAmountTotalProforma" style="display:none">&nbsp;</td>
    <td id="tdFinalVarianceTotalProforma" style="display:none">&nbsp;</td>
  </tr>
  </tfoot>
</table>

<input type="button" onclick="Setme()">
</body>
</html>

Answer : HTML Cellindex showing wrong index while display:none

Its a workaround I know but the other fix was a patch that needs to be added to specific machines. This should work out for you a bit better.
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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="Javascript">
	
function SetInnerText(pRow, pTD, pValue)
{
  //if (pRow.cells(pTD.cellIndex + 1).style.display == "")
    //pTD.innerText = pValue;
  if (pTD.id == "tdFinalVarianceTotalProforma") alert(getAbsoluteIndex(pRow,pTD.cellIndex,pTD));			
}
function getAbsoluteIndex(t,relIndex,cellp) 
{ 
countnotvisible=0; 
countvisible=0; 
for (i=0;i<t.cells.length;i++) { 
var cell=t.cells[i]; 
if (cell.id==cellp.id)break;
if (cell.style.display=='none') countnotvisible++; else countvisible++; 

} 
return countnotvisible+countvisible; 
} 
function Setme()
{
  SetInnerText(document.getElementById("trProformaRow"),document.getElementById("tdFinalVarianceTotalProforma"),"wqE");
}

</script>
	
</head>

<body>
<table border="1" id="tblProforma" cellspacing="0" cellpadding="0" style="margin-left: 2">
  <thead>
  <tr>
    <td width="100">&nbsp;Service Group&nbsp;</td>
    <td width="123">&nbsp;Service&nbsp;</td>
    <td width="50">&nbsp;BLT&nbsp;</td>
    <td width="50">&nbsp;Proforma&nbsp;</td>
    <td width="50">&nbsp;Variance&nbsp;</td>
    <td width="120">&nbsp;Comment&nbsp;</td>
    <td width="50">&nbsp;Close Estimate&nbsp;</td>
    <td width="50">&nbsp;Actual&nbsp;</td>
    <td width="50">&nbsp;Variance&nbsp;</td>
    <td width="120">&nbsp;Comment&nbsp;</td>
  </tr>
  </thead>
  <tbody>
  <tr>    
    <td width="100">&nbsp;</td>
    <td width="120">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="125">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="125">&nbsp;</td>
  </tr>
  </tbody>
  <tfoot>
  <tr id="trProformaRow">
    <td id="tdTotals">&nbsp;Totals:</td>
    <td id="tdService">&nbsp;</td>
    <td id="tdBLTAmountTotalProforma" style="display:none">&nbsp;</td>
    <td id="tdFinalProfTotalProforma">&nbsp;</td>
    <td id="tdInitVarianceTotalProforma">&nbsp;</td>
    <td id="tdComment" style="display:none">&nbsp;</td>
    <td id="tdCloseEstimateTotalProforma">&nbsp;</td>
    <td id="tdActualAmountTotalProforma" style="display:none">&nbsp;</td>
    <td id="tdFinalVarianceTotalProforma" style="display:none">&nbsp;</td>
  </tr>
  </tfoot>
</table>

<input type="button" onclick="Setme()">
</body>
</html>
Random Solutions  
 
programming4us programming4us