js如何找到td在tr中的第几位 

解决方案 »

  1.   


    <body>
    点击表格
    <table id="tbl">
    <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    </tr>
    <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    </tr>
    </table>
    <script type="text/javascript">
    void function() {
    var tds = document.getElementById('tbl').getElementsByTagName('td'), i = 0, l = tds.length;
    for (; i < l; i++) {
    tds[i].onclick = function() {
    alert([(this.parentNode.rowIndex + 1) + '行', (this.cellIndex + 1) + '列']);
    }
    }
    }();
    </script>
    </body>
      

  2.   


    <html>
    <head>
    <style type="text/css">
    table {
    background-color: #CCCCCC;
    }
    tr {
    background-color: #FFFFFF;
    }
    </style>
    <script type="text/javascript">
    function clickTd() {
    var e = arguments[0] || window.event;
    var td = e.srcElement||e.target;
    var tr = td.parentNode;
    var len = tr.cells.length;
    for (var i = 0; i < len; i++) {
    if (tr.cells[i] == td) {
    alert("第" + (i + 1) + "个TD");
    }
    }
    e.cancelBubble = true;
    }
    </script>
    </head>
    <body>
    <table border="0" cellspacing="1" onclick="clickTd()">
    <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
    <td>td4</td>
    <td>td5</td>
    </tr>
    <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
    <td>td4</td>
    <td>td5</td>
    </tr>
    <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
    <td>td4</td>
    <td>td5</td>
    </tr>
    <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
    <td>td4</td>
    <td>td5</td>
    </tr>
    <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
    <td>td4</td>
    <td>td5</td>
    </tr>
    </table>
    </body>
    </html>
      

  3.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
      $("td").click(function (){ 
    alert( $(this).parent().children().index($(this)));
    }); 
    }); 
    </script>
    </head><body style="text-align:left">
    <table>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </table>
    </body>jquery~