您的当前位置:首页正文

jquery - 获取table整行信息,不用onclick传值

2024-11-05 来源:个人技术集锦

在项目里有一个编辑按钮,点击弹出弹窗,需要获取很多值,之前直接穿一个json,但是会有bug,因为json里有的需要转义

解决 :通过$(this)获取tr,再依次获取需要的td的值

//html
 <tr data-id="{{$item->id}}" data-category="{{$item->category}}">
                            <td class="vertical-middle">{{$item->name_zh_cn}}</td>
                            <td class="vertical-middle">{{$item->name_en}}</td>
                            <td class="vertical-middle">{{$item->name_ko}}</td>
                            <td class="vertical-middle">{{$item->des_zh_cn}}</td>
                            <td class="vertical-middle">{{$item->des_en}}</td>
                            <td class="vertical-middle">{{$item->des_ko}}</td>
                            <td class="vertical-middle type" data-value="{{$item->type}}">
                              $item->type
                            </td>
                            <td class="vertical-middle">
                                <img src="{{asset($item->cover_name)}}" style="max-height: 80px;max-width:80px; " onclick="fullImage('{{asset($item->cover_name)}}')">
                            </td>
                            <td class="vertical-middle">
                                @if($item->url=='')
                                    暂无页面
                                @else
                                    <a target="_blank" href="{{route($item->url)}}">{{$item->url}}</a>
                                @endif
                            </td>
                            <td class="vertical-middle">{{$item->sort}}</td>
                            <td class="vertical-middle">
                                <button class="btn btn-primary edit-item">修改</button>
                                <button class="btn btn-danger delete-item">删除</button>
                            </td>
                        </tr>
//js
$(document).ready(function () {
        //编辑产品
        $('.edit-item').click(function () {
            //清空列表
            $('#editForm .form-control').val("");
            var tr = $(this).parents('tr');
            var name_zh_cn = tr.children('td').eq(0).text();
            var name_en = tr.children('td').eq(1).text();
            var name_ko = tr.children('td').eq(2).text();
            var des_zh_cn = tr.children('td').eq(3).text();
            var des_en = tr.children('td').eq(4).text();
            var des_ko = tr.children('td').eq(5).text();
            var imgurl = tr.children('td').eq(-4).children('img').attr('src');
            var sort = tr.children('td').eq(-2).text();
            var id = tr.data('id');
            var category = tr.data('category');
            var type = tr.children('td').eq(-5).data('value');
            $('#editForm #name_zh_cn').val(name_zh_cn);
            $('#editForm #name_en').val(name_en);
            $('#editForm #name_ko').val(name_ko);
            $('#editForm #des_zh_cn').val(des_zh_cn);
            $('#editForm #des_en').val(des_en);
            $('#editForm #des_ko').val(des_ko);
            $('#editForm #sort').val(sort);
            $('#editForm img').attr('src', imgurl);
            $('#editForm #id').val(id);
            $('#editForm #category').val(category);
            $('#editForm select[name="type"]').val(type);
        });
    });

转载于:https://www.cnblogs.com/gggggggxin/p/11434561.html

Top