欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js如何获取html表单里面的某一元素的值?

程序员文章站 2022-04-01 09:29:57
对于新手,在获取元素的信息时,常常会遇到如何准确选择到想要获取的元素问题 例如:想要获取当前按钮所在行的某一元素值: 当点击铅笔图标获取到当前行id的值0 具体实现:...

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

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

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

js如何获取html表单里面的某一元素的值?

js如何获取html表单里面的某一元素的值?

具体实现:

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的元素的值