摘要:对于新手,在获取元素的信息时,常常会遇到如何准确选择到想要获取的元素问题

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

对于新手,在获取元素的信息时,常常会遇到如何准确选择到想要获取的元素问题

例如:想要获取当前按钮所在行的某一元素值:

当点击铅笔图标获取到当前行id的值0

具体实现:

html代码:

 <tbody id="tabletest">          <tr>           <td class="td id">0</td>           <td>admin</td>           <td>admin</td>           <td>张老师</td>           <td>https://atth.jzb.com/forum/201601/15/100844l55jr2d5b8wnc5ee.jpg</td>           <td>1</td>           <td>1</td>           <td>2017-4-13</td>           <td>               <p class="btn-group btn-group-xs">                   <button class="btn btn-transparent eye">                       <i class="fa fa-eye"></i>                   </button>                   <button class="btn btn-transparent update">                       <i class="fa fa-pencil"></i>                   </button>                   <button class="btn btn-transparent delete">                       <i class="fa fa-times"></i>                   </button>               </p>           </td>       </tr>       <tr>           <td class="td id">1</td>           <td>student</td>           <td>student</td>           <td>李同学</td>           <td>https://atth.jzb.com/forum/201601/15/100844l55jr2d5b8wnc5ee.jpg</td>           <td>0</td>           <td>1</td>           <td>2017-4-17</td>           <td>               <p class="btn-group btn-group-xs">                   <button class="btn btn-transparent eye">                       <i class="fa fa-eye"></i>                   </button>                   <button class="btn btn-transparent update">                       <i class="fa fa-pencil"></i>                   </button>                   <button class="btn btn-transparent delete">                       <i class="fa fa-times"></i>                   </button>               </p>           </td>       </tr>   </tbody>  

js实现代码:

 var i=$(this).parents("tr").find(".td.id").text();  alert(i);

实现原理:

1.通过$(this)获取所点击的按钮

2.$(this).parents("tr")获取按钮所在行

3.$(this).parents("tr").find(".td.id").text()获取按钮所在行class为td id的元素的值

对于新手,在获取元素的信息时,常常会遇到如何准确选择到想要获取的元素问题

例如:想要获取当前按钮所在行的某一元素值:

当点击铅笔图标获取到当前行id的值0

具体实现:

html代码:

 <tbody id="tabletest">          <tr>           <td class="td id">0</td>           <td>admin</td>           <td>admin</td>           <td>张老师</td>           <td>https://atth.jzb.com/forum/201601/15/100844l55jr2d5b8wnc5ee.jpg</td>           <td>1</td>           <td>1</td>           <td>2017-4-13</td>           <td>               <p class="btn-group btn-group-xs">                   <button class="btn btn-transparent eye">                       <i class="fa fa-eye"></i>                   </button>                   <button class="btn btn-transparent update">                       <i class="fa fa-pencil"></i>                   </button>                   <button class="btn btn-transparent delete">                       <i class="fa fa-times"></i>                   </button>               </p>           </td>       </tr>       <tr>           <td class="td id">1</td>           <td>student</td>           <td>student</td>           <td>李同学</td>           <td>https://atth.jzb.com/forum/201601/15/100844l55jr2d5b8wnc5ee.jpg</td>           <td>0</td>           <td>1</td>           <td>2017-4-17</td>           <td>               <p class="btn-group btn-group-xs">                   <button class="btn btn-transparent eye">                       <i class="fa fa-eye"></i>                   </button>                   <button class="btn btn-transparent update">                       <i class="fa fa-pencil"></i>                   </button>                   <button class="btn btn-transparent delete">                       <i class="fa fa-times"></i>                   </button>               </p>           </td>       </tr>   </tbody>  

js实现代码:

 var i=$(this).parents("tr").find(".td.id").text();  alert(i);

实现原理:

1.通过$(this)获取所点击的按钮

2.$(this).parents("tr")获取按钮所在行

3.$(this).parents("tr").find(".td.id").text()获取按钮所在行class为td id的元素的值

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!