Question

我是新手，我喜欢用onclick获取rowindex，colindex和该行第一列的值。我在单独的部分找到了这些答案，但不能将它们放在一起。如果以下代码也可以在第一列中提供我的价值，我会非常高兴。提前致谢。十

    <!doctype html>
    <html>
    <head>
    <title>Determine Click Position on click of a table cell</title>
    <!--CSS -->
    <style>
        td{
            cursor:pointer;
            background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
            text-align:center;
        }

        td:hover{
            background: -moz-linear-gradient(top, #249ee4, #057cc0);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
        }

        td:active
        {
            background: -moz-linear-gradient(top, #057cc0, #249ee4);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
        }

        #result{
            font-weight:bold;
            font-size:16pt;
        }
    </style>
    <!--JAVASCRIPT -->
    <script  src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>     
    <script>
        $(document).ready(function(){
            $("#myTable td").click(function() {     

                var column_num = parseInt( $(this).index() ) + 1;
                var row_num = parseInt( $(this).parent().index() )+1;    

                $("#result").html( "Row_numx =" + row_num + "  ,  Rolumn_numx ="+ column_num );   
            });
        });
    </script>
    </head>
    <body>
        <div id="result"> </div>
        <table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
            <!--1st ROW-->
            <tr>
                <td>row 1, col 1</td>
                <td>row 1, col 2</td>
                <td>row 1, col 3</td>
                <td>row 1, col 4</td>
                <td>row 1, col 5</td>
            </tr>

            <!--2nd ROW-->
            <tr>
                <td>row 2, col 1</td>
                <td>row 2, col 2</td>
                <td>row 2, col 3</td>
                <td>row 2, col 4</td>
                <td>row 2, col 5</td>
            </tr>

            <!--3rd ROW-->
            <tr>
                <td>row 3, col 1</td>
                <td>row 3, col 2</td>
                <td>row 3, col 3</td>
                <td>row 3, col 4</td>
                <td>row 3, col 5</td>
            </tr>

            <!--4th ROW-->
            <tr>
                <td>row 4, col 1</td>
                <td>row 4, col 2</td>
                <td>row 4, col 3</td>
                <td>row 4, col 4</td>
                <td>row 4, col 5</td>
            </tr>

            <!--5th ROW-->
            <tr>
                <td>row 5, col 1</td>
                <td>row 5, col 2</td>
                <td>row 5, col 3</td>
                <td>row 5, col 4</td>
                <td>row 5, col 5</td>
            </tr>
        </table>
    </body>
    </html>

Answer 1

您可以使用siblings(:first-child)获得第一个兄弟姐妹<td>。

var col0_val = $(this).parent().children(":first-child").html();

以下是摘录：

＆＃13;

$(document).ready(function() {
  $("#myTable td").click(function() {

    var column_num = parseInt($(this).index()) + 1;
    var row_num = parseInt($(this).parent().index()) + 1;
    var col0_val =  $(this).parent().children(":first-child").html();

    console.log(col0_val);

    $("#result").html("Row_numx =" + row_num + "  ,  Rolumn_numx =" + column_num + ", First_column_value = " + col0_val);


  });
});

＆＃13;

td {
  cursor: pointer;
  background: -moz-linear-gradient(top, #ffffff, #D1E3E9);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D1E3E9));
  text-align: center;
}
td:hover {
  background: -moz-linear-gradient(top, #249ee4, #057cc0);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#249ee4), to(#057cc0));
}
td:active {
  background: -moz-linear-gradient(top, #057cc0, #249ee4);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#057cc0), to(#249ee4));
}
#result {
  font-weight: bold;
  font-size: 16pt;
}

＆＃13;

<!doctype html>
<html>

<head>
  <title>Determine Click Position on click of a table cell</title>
  <!--JAVASCRIPT -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>

<body>
  <div id="result"></div>
  <table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
    <!--1st ROW-->
    <tr>
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
      <td>row 1, col 3</td>
      <td>row 1, col 4</td>
      <td>row 1, col 5</td>
    </tr>

    <!--2nd ROW-->
    <tr>
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
      <td>row 2, col 3</td>
      <td>row 2, col 4</td>
      <td>row 2, col 5</td>
    </tr>

    <!--3rd ROW-->
    <tr>
      <td>row 3, col 1</td>
      <td>row 3, col 2</td>
      <td>row 3, col 3</td>
      <td>row 3, col 4</td>
      <td>row 3, col 5</td>
    </tr>

    <!--4th ROW-->
    <tr>
      <td>row 4, col 1</td>
      <td>row 4, col 2</td>
      <td>row 4, col 3</td>
      <td>row 4, col 4</td>
      <td>row 4, col 5</td>
    </tr>

    <!--5th ROW-->
    <tr>
      <td>row 5, col 1</td>
      <td>row 5, col 2</td>
      <td>row 5, col 3</td>
      <td>row 5, col 4</td>
      <td>row 5, col 5</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

javascript rowindex cellindex＆amp;第一列的单元格值

1 个答案: