目前的進度到抓取資料,沒有修改並儲存。
先把要抓取的資料放入table
<tr>
<th scope="row">1</th>
<td class="text-success">商品A</td>
<td data-name="AAA" class="custom-name">
AAA
</td>
<td data-email="AAA@mail.com" class="custom-email">AAA@mail.com</td>
<td data-status="已出貨" class="custom-status">已出貨</td>
<td class="text-center">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#edit"
data-title="商品A">編輯</button>
<button type="button" class="btn btn-outline-warning">查看</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
其他
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#" data-toggle="modal" data-target="#remove"
data-title="商品A">刪除</a>
</div>
</div>
</td>
</tr>
可以用不同寫法抓取table資料,只要抓得到就好。
1.抓取最近的td,並搜尋同層中的class
$('#edit').on('show.bs.modal', function (e) {
let name = btn.closest('td').siblings('.custom-name').data('name');
});
2.觀察btn所在位置,上移二層再搜尋所需的class
$('#edit').on('show.bs.modal', function (e) {
let status = btn.parent().parent().siblings('.custom-status').data('status');
});
把用來抓取資料的code放入控制modal的function內就完成了
$('#edit').on('show.bs.modal', function (e) {
//show.bs.modal = BS內建,觸發時執行
let btn = $(e.relatedTarget); //抓取觸發按鈕的資料
// console.log(btn);//確認點擊到哪個按鈕
let title = btn.data('title');
let name = btn.closest('td').siblings('.custom-name').data('name');
//抓取最近的td,並搜尋同層中的class
let email = btn.closest('td').siblings('.custom-email').data('email');
let status = btn.parent().parent().siblings('.custom-status').data('status');
//觀察btn所在位置,上移二層再搜尋所需的class
let modal = $(this); //要修改的modal就是現在開啟的這個modal
modal.find('.modal-title').text('編輯 ' + title); //把modal的title換成按鈕上的title
modal.find('.modal-body input#name').val(name);//把抓到的資料顯示在input內
modal.find('.modal-body input#Email').val(email);
modal.find('.modal-body input#status').val(status);
});