Results 1 to 5 of 5

Thread: row and cell index problem

  1. #1
    Join Date
    Jun 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default row and cell index problem

    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>
    Last edited by zodehala; 02-24-2013 at 06:21 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 02-17-2013 at 10:42 AM. Reason: add alternate method
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    zodehala (02-17-2013)

  6. #5
    Join Date
    Jun 2010
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanx jscheuer1. it is very helpful

Similar Threads

  1. Problem with my submenu cell.
    By paldo in forum CSS
    Replies: 1
    Last Post: 05-06-2010, 12:52 PM
  2. facebox problem in table cell
    By tomba in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-03-2009, 01:07 AM
  3. Make cell color depend on cell data
    By manju.msrit in forum Other
    Replies: 1
    Last Post: 07-10-2007, 07:40 AM
  4. Replies: 4
    Last Post: 04-09-2007, 07:58 PM
  5. Replies: 2
    Last Post: 12-25-2005, 10:38 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •