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