iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

前端新手的學習筆記系列 第 3

Day03:每天一個小練習 - Bootstrap動態傳入Modal參數02

  • 分享至 

  • xImage
  •  

目前的進度到抓取資料,沒有修改並儲存。


先把要抓取的資料放入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);
        });

連結


上一篇
Day02:每天一個小練習 - Bootstrap動態傳入Modal參數
下一篇
Day04:每天一個小練習 - Bootstrap選單切換
系列文
前端新手的學習筆記32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言