用jQuery获取table中行id和td值的实现代码

前端技术 2023/09/06 JavaScript

用jQuery获取table中行id和td值的实现代码

<%@ page language=\"java\" pageEncoding=\"UTF-8\"%>
<%
  String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang=\"zh-cn\">
  <head>
    <title>点击</title>
    <meta content=\"IE=edge\" http-equiv=\"X-UA-Compatible\">
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
    <meta http-equiv=\"Content-Language\" content=\"zh-cn\" />
    <meta name=\"author\" content=\"linjiqin218@126.com\" />
    <meta name=\"Copyright\" content=\"parami|phpstudy\" />

    <meta http-equiv=\"pragma\" content=\"no-cache\">
    <meta http-equiv=\"cache-control\" content=\"no-cache\">
    <meta http-equiv=\"expires\" content=\"0\">

    <meta http-equiv=\"keywords\" content=\"keyword1,keyword2,keyword3\">
    <meta http-equiv=\"description\" content=\"This is my page\">
    <jsp:include page=\"/demo/base/js_bootstrap.jsp\" />
    <script type=\"text/javascript\">
    $(function(){
      //用jQuery获取table中td值
      $(\"#mytable td\").click(function(){
        alert(\"table td值：\"+$(this).text());
      });
      
      //jQuery获取table中点击位置所在行的id
      $(\"#mytable td\").click(function() {
        //td的id 
        alert($(this).attr(\"id\"));
        //tr的id 
        alert($(this).parent().attr(\"id\"));
      });
    });
    </script>
  </head>
  <body>
  <table id=\"mytable\" width=\"708px;\" cellpadding=\"5\" cellspacing=\"1\">
    <tbody>
      <tr bgcolor=\"#DEE9F4\" id=\"tr_1\">
        <td align=\"center\"> 日</td>
        <td align=\"center\"> 一 </td>
        <td align=\"center\"> 二 </td>
        <td align=\"center\"> 三 </td>
        <td align=\"center\"> 四 </td>
        <td align=\"center\"> 五 </td>
        <td align=\"center\"> 六 </td>
      </tr>
      <tr bgcolor=\"#DEE9F4\" id=\"tr_2\">
        <td align=\"center\">   </td>
        <td align=\"center\">   </td>
        <td align=\"center\">   </td>
        <td align=\"center\"> 1 </td>
        <td align=\"center\"> 2 </td>
        <td align=\"center\"> 3 </td>
        <td align=\"center\"> 4</td>
      </tr>
      <tr bgcolor=\"#DEE9F4\" id=\"tr_3\">
        <td align=\"center\"> 5 </td>
        <td align=\"center\"> 6 </td>
        <td align=\"center\"> 7 </td>
        <td align=\"center\"> 8 </td>
        <td align=\"center\"> 9 </td>
        <td align=\"center\" bgcolor=\"red\">10</td>
        <td align=\"center\">11</td>
      </tr>
      <tr bgcolor=\"#DEE9F4\" id=\"tr_4\">
        <td align=\"center\"> 12 </td>
        <td align=\"center\"> 13 </td>
        <td align=\"center\"> 14 </td>
        <td align=\"center\"> 15 </td>
        <td align=\"center\"> 16 </td>
        <td align=\"center\"> 17 </td>
        <td align=\"center\"> 18 </td>
      </tr>
    </tbody>
  </table>  
  </body>
</html>

以上这篇用jQuery获取table中行id和td值的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/17191

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案