zoukankan      html  css  js  c++  java
  • jquery

    在项目里有一个编辑按钮,点击弹出弹窗,需要获取很多值,之前直接穿一个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-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);
            });
        });
    
    

  • 相关阅读:
    P6329 【模板】点分树 | 震波
    Luogu P3350 [ZJOI2016]旅行者
    Luogu [ZJOI2015]幻想乡战略游戏
    斐波那契数列简单性质
    Luogu P2056 [ZJOI2007]捉迷藏
    Luogu P4127 [AHOI2009]同类分布
    A funny story in regard to a linux newbie
    Inside the c++ object module 阅读摘要
    java并发编程
    JVM执行引擎总结(读《深入理解JVM》) 早期编译优化 DCE for java
  • 原文地址:https://www.cnblogs.com/gggggggxin/p/11434561.html
Copyright © 2011-2022 走看看