个人中心
gpt4 book ai didi

jquery - 第一列的javascript rowindex cellindex和单元格值

转载 作者：行者123 更新时间：2023-11-28 01:04:03 30 4
gpt4 key购买 nike

我是新手，我想通过 onclick 获取行索引、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>

最佳答案

您可以使用 siblings(:first-child)得到第一个 sibling ，这将是你的第一个<td> .

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

这是片段:

$(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);


  });
});
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;
}
<!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>

关于jquery - 第一列的javascript rowindex cellindex和单元格值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40733270/

30 4 0
文章推荐： c++使用指针的自定义矩阵模板
文章推荐： c++ - Windows 编程 : WNDCLASS structure: hIcon member Problem
文章推荐： c++ - 4 个有符号字节打包成 32 位无符号
文章推荐： html - div inside li 全 Angular
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com