row and cell index problem

**zodehala** · 02-16-2013, 11:57 PM

why row index is undefined ??????????????

Code:

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

				
	}

HTML Code:

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

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

Code:

<!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 ???

HTML Code:

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

HTML Code:

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

Code:

<!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>