PDA

View Full Version : Resolved row and cell index problem



zodehala
02-16-2013, 11:57 PM
why row index is undefined ??????????????



function ci(x){
var a = x.cellIndex;
var b = x.rowIndex;
document.getElementById("ci").innerHTML = a+" x "+b;


}


<table border="2" id="tablo1">
<th>P.tesi</th>
<th>Salı</th>
<th>Çarşamba</th>
<th>Perşembe</th>
<th>Cuma</th>
<th>C.tesi</th>
<th>Pazar</th>

<tr onclick="ci(this)">
<td onclick="ci(this)">26</td>
<td onclick="ci(this)">27</td>
<td onclick="ci(this)">28</td>
<td onclick="ci(this)">29</td>
<td onclick="ci(this)">30</td>
<td onclick="ci(this)">1</td>
<td onclick="ci(this)">2</td>
</tr>
<tr onclick="ci(this)">
<td onclick="ci(this)">2</td>
<td onclick="ci(this)">3</td>
<td onclick="ci(this)">13</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
</tr>
<tr onclick="ci(this)">
<td onclick="ci(this)">9</td>
<td onclick="ci(this)">10</td>
<td onclick="ci(this)">11</td>
<td onclick="ci(this)">12</td>
<td onclick="ci(this)">13</td>
<td onclick="ci(this)">14</td>
<td onclick="ci(this)">15</td>
</tr>
<tr onclick="ci(this)">
<td onclick="ci(this)">16</td>
<td onclick="ci(this)">17</td>
<td onclick="ci(this)">20</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">21</td>
<td onclick="ci(this)">22</td>
</tr>
<tr onclick="ci(this)">
<td onclick="ci(this)">23</td>
<td onclick="ci(this)">24</td>
<td onclick="ci(this)">25</td>
<td onclick="ci(this)">26</td>

<td onclick="ci(this)">27</td>
<td onclick="ci(this)">28</td>
<td onclick="ci(this)">29</td>
</tr>
<tr>
<td colspan="5"><div>index :</div></td>
<td colspan="2"><b><div id="ci"></div></b></td>
</tr>

</table>


http://divran.com/s/upload/images/jxyk1qiy9i18wqv30sy8_thumb.gif (http://divran.com/s/upload/viewer.php?file=jxyk1qiy9i18wqv30sy8.gif)

jscheuer1
02-17-2013, 04:08 AM
The row index in your image is 4, what is undefined is the cell index. The reason why is that in javascript, unless something is done to prevent them from doing so, events either bubble up (all IE in quirks mode, IE 7 and less in standards mode), or propagate (all others). The effect isn't exactly the same. But for this code it is. So, you click on the td. It has a cellIndex but no rowIndex. But that doesn't matter because then the event rises to the tr, and it has a rowIndex, but no cellIndex, so that information overwrites that from the td. There are various ways to deal with this situation. One of the easiest is to remove the event from the tr and check its rowIndex as the parentNode of the td:


<!DOCTYPE html>
<html>
<head>
<title>Cell X Row Indexes - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function ci(x){
var a = x.cellIndex;
var b = x.parentNode.rowIndex;
document.getElementById("ci").innerHTML = a+" x "+b;
}
</script>
</head>
<body>
<table border="2" id="tablo1">
<th>P.tesi</th>
<th>Sali</th>
<th>Çarsamba</th>
<th>Persembe</th>
<th>Cuma</th>
<th>C.tesi</th>
<th>Pazar</th>

<tr>
<td onclick="ci(this)">26</td>
<td onclick="ci(this)">27</td>
<td onclick="ci(this)">28</td>
<td onclick="ci(this)">29</td>
<td onclick="ci(this)">30</td>
<td onclick="ci(this)">1</td>
<td onclick="ci(this)">2</td>
</tr>
<tr>
<td onclick="ci(this)">2</td>
<td onclick="ci(this)">3</td>
<td onclick="ci(this)">13</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
</tr>
<tr>
<td onclick="ci(this)">9</td>
<td onclick="ci(this)">10</td>
<td onclick="ci(this)">11</td>
<td onclick="ci(this)">12</td>
<td onclick="ci(this)">13</td>
<td onclick="ci(this)">14</td>
<td onclick="ci(this)">15</td>
</tr>
<tr>
<td onclick="ci(this)">16</td>
<td onclick="ci(this)">17</td>
<td onclick="ci(this)">20</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">&nbsp;</td>
<td onclick="ci(this)">21</td>
<td onclick="ci(this)">22</td>
</tr>
<tr>
<td onclick="ci(this)">23</td>
<td onclick="ci(this)">24</td>
<td onclick="ci(this)">25</td>
<td onclick="ci(this)">26</td>

<td onclick="ci(this)">27</td>
<td onclick="ci(this)">28</td>
<td onclick="ci(this)">29</td>
</tr>
<tr>
<td colspan="5"><div>index :</div></td>
<td colspan="2"><b><div id="ci"></div></b></td>
</tr>

</table>
</body>
</html>

zodehala
02-17-2013, 11:14 AM
i solved this problem using 2 sparate function like following

but how can i do it in 1 function ???


function ci(x){
var a = x.cellIndex;
document.getElementById("ci").innerHTML = a;
}
function ri(x){
var b = x.rowIndex
document.getElementById("ri").innerHTML = b;
}





<tr>
<td colspan="5"><div>cell index :</div></td>
<td colspan="2"><b><div id="ci"></div></b></td>
</tr>
<tr>
<td colspan="5"><div>Row index :</div></td>
<td colspan="2"><b><div id="ri"></div></b></td>
</tr>

jscheuer1
02-17-2013, 11:36 AM
See my other post in this thread. It uses just one function. However, less is not always the best. Here is valid code for the same thing with structure (HTML markup), presentation (CSS style) and effects (javascript) kept separate as is generally recommended:


<!DOCTYPE html>
<html>
<head>
<title>Cell X Row Indexes - Demo#2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#tablo1 {
border: 2px solid;
border-color: #afafaf #000 #000 #afafaf;
empty-cells: show;
}
#tablo1 td {
border: 1px solid;
border-color: #000 #afafaf #afafaf #000;
}
#idx {
text-align: right;
padding-right: 0.5em
}
#ci {
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
(function(){
var table, rowlimit;
function ci(e){
table = table || document.getElementById('tablo1');
rowlimit = rowlimit || table.rows.length - 1;
e = e || event;
var t = e.target || e.srcElement, c, r;
if(typeof (c = t.cellIndex) === 'number'){
r = t.parentNode.rowIndex;
r && r < rowlimit && (function(){document.getElementById('ci').innerHTML = c + ' x ' + r;})();
}
}
if (document.addEventListener){
document.addEventListener('click', ci, false);
}
else if (document.attachEvent){
document.attachEvent('onclick', ci);
}
})();
</script>
</head>
<body>
<table border="1" id="tablo1">
<tr>
<th>P.tesi</th>
<th>Sali</th>
<th>Çarsamba</th>
<th>Persembe</th>
<th>Cuma</th>
<th>C.tesi</th>
<th>Pazar</th>
</tr>

<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>13</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>20</td>
<td></td>
<td></td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>

<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td colspan="5" id="idx">indexes:</td>
<td colspan="2" id="ci"></td>
</tr>

</table>
</body>
</html>

zodehala
02-17-2013, 02:46 PM
Thanx jscheuer1. it is very helpful