js轻松搞定“获取table当前行，指定字段值“

清疚 2023-09-29 16:46 84阅读 0赞

## js轻松搞定"获取table当前行，指定字段值" ##

#### 1、第一步 ####

表头，每一个<td></td>标签中，用id声明字段值.

![在这里插入图片描述][0bac8def383b42dfa98741435d6bad87.png]

#### 2、第二步 ####

声明表头的Id  
![在这里插入图片描述][6b5e6e17898446f4bf2b07d16679c6cb.png]

#### 3、第三步 ####

cdn引入jquery：

#### 4、第四步 ####

页面中添加这段封装好的js代码

//row，当前行的this对象.filed，需要获取的字段值.tableHeadId，table表头行row的ID值.
    function getCurrentRowFiledValue(row, filed, tableHeadId) {
        
        //获取table表头所有td
        var fileds = $(tableHeadId).children();
        //记录表头中所有的字段
        var tableHeadFileds = [];
        //  长度-1，是减去操作列.
        for (let i = 0; i < fileds.length - 1; i++) {
        
            tableHeadFileds.push(fileds[i].id)
        }
        //找到当前行，指定的字段值.
        for (let i = 0; i < tableHeadFileds.length; i++) {
        
            if (tableHeadFileds[i] == filed) {
        
                //返回当前行的指定字段值.
                return $(row).parent().parent().children()[i].innerHTML;
            }
        }
    }

## 1、使用案例 ##

就拿常用的删除操作来演示

*  绑定一个事件  
    ![在这里插入图片描述][d8c7b41c5ee5452383f2f80bcdf103cf.png]
 *  声明表头ID，然后直接调用getCurrentRowFiledValue  
    ![在这里插入图片描述][f3c8855a9af840c4b054ea2b73c8ce18.png]

## 2、测试案例 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1px">
        <tr id="filed">
            <td id="id">ID</td>
            <td id="title">标题</td>
            <td id="category">类型</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>一起去看流星雨</td>
            <td>综艺</td>
            <td>
                <button onclick="del(this,'id')">删除(获取id)</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>孤勇者</td>
            <td>激情</td>
            <td>
                <button onclick="del(this,'title')">删除(获取title)</button>
            </td>
        </tr>
    
    </table>
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    
        function del(row, filed) {
          
            var tableHeadId = "#filed";
            console.log(getCurrentRowFiledValue(row, filed, tableHeadId));
        }
    
        //row，当前行的this对象.filed，需要获取的字段值.tableHeadId，table表头行row的ID值.
        function getCurrentRowFiledValue(row, filed, tableHeadId) {
          
            //获取table表头所有td
            var fileds = $(tableHeadId).children();
            //记录表头中所有的字段
            var tableHeadFileds = [];
            //  长度-1，是减去操作列.
            for (let i = 0; i < fileds.length - 1; i++) {
          
                tableHeadFileds.push(fileds[i].id)
            }
            //找到当前行，指定的字段值.
            for (let i = 0; i < tableHeadFileds.length; i++) {
          
                if (tableHeadFileds[i] == filed) {
          
                    //返回当前行的指定字段值.
                    return $(row).parent().parent().children()[i].innerHTML;
                }
            }
        }
    </script>
    </html>

![在这里插入图片描述][1b41b41e16884b1f82795883a5fe7825.png]

[0bac8def383b42dfa98741435d6bad87.png]: https://img-blog.csdnimg.cn/0bac8def383b42dfa98741435d6bad87.png
[6b5e6e17898446f4bf2b07d16679c6cb.png]: https://img-blog.csdnimg.cn/6b5e6e17898446f4bf2b07d16679c6cb.png
[d8c7b41c5ee5452383f2f80bcdf103cf.png]: https://img-blog.csdnimg.cn/d8c7b41c5ee5452383f2f80bcdf103cf.png
[f3c8855a9af840c4b054ea2b73c8ce18.png]: https://img-blog.csdnimg.cn/f3c8855a9af840c4b054ea2b73c8ce18.png
[1b41b41e16884b1f82795883a5fe7825.png]: https://img-blog.csdnimg.cn/1b41b41e16884b1f82795883a5fe7825.png