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);
            });
        });
    
    

  • 相关阅读:
    Oracle中创建视图
    SQL Server 2012 Express安装图解
    oracle学习笔记
    Oracle中视图的创建和处理方法
    DDL、DML和DCL的理解
    ROS学习--如何结合launch文件使用参数服务器
    stm32多块开发板can总线互联卡死问题
    ROS CAN总线设备接入(二)can总线数据提取和以ros topic形式发布
    ROS CAN总线设备接入(一)Linux动态库的显式调用
    ROS .so载入undefined reference to `dlopen'问题
  • 原文地址:https://www.cnblogs.com/gggggggxin/p/11434561.html
Copyright © 2011-2022 走看看