HTML:取得table各列資訊後以按鈕傳送資料

html javascript gridview

king742171 2017-11-06 09:45:41 ‧ 15574 瀏覽

有個問題請教一下版上大大們~
我用bootstrap4做了一個table如下：

<table class="table table-striped table-primary table-hover table-sm table-bordered text-center">
    <thead id="header_table" class="bg-infobar">
        <tr>
            <th>類別</th>
            <th>審查狀態</th>
            <th>姓名</th>
            <th>身份證</th>
            <th>生日</th>
            <th>會員編號</th>
            <th>註冊日期</th>
        </tr>
    </thead>
    <tbody id="view_table">
        <?php 

        echo   '<tr>
                    <td class="align-middle"><button type="button" class="btn btn-secondary btn-sm w-75" disabled>一般</button></td>
                    <td class="align-middle"><button id="btn_assess" type="button" class="btn btn-primary btn-sm w-75">未審查</button></td>
                    <td class="align-middle">王小名</td>
                    <td class="align-middle">R123456789</td>
                    <td class="align-middle">80/01/01</td>
                    <td class="align-middle">12345678</td>
                    <td class="align-middle">106/01/02</td>
                </tr>
                <tr>
                    <td class="align-middle"><button type="button" class="btn btn-secondary btn-sm w-75" disabled>一般</button></td>
                    <td class="align-middle"><button id="btn_assess" type="button" class="btn btn-primary btn-sm w-75">未審查</button></td>
                    <td class="align-middle">路小慢</td>
                    <td class="align-middle">Q213456987</td>
                    <td class="align-middle">82/02/02</td>
                    <td class="align-middle">12345679</td>
                    <td class="align-middle">106/01/30</td>
                </tr>';

        ?>
        
    </tbody>
</table>

中間PHP部份是為了讓網頁載入後
先從後台SQL撈資料~
最後再以for迴圈個別印出每列資料(tr)

現在要做的是....
每一列都有一顆審查按鈕
當我按下按鈕後
會以post方式將該列的資訊傳出去

不過..重點問題來了..
為了不讓每次傳送都送出整列資訊..
畢竟我上面的只是列出部份欄位..= =
為了讓後面接手的工程師撰寫方便
上頭希望保留每欄的名稱..
讓工程師可以方便操控按鈕要接收哪些資訊

我有想了個方法..
就是取得header裡面的每欄內容當作名稱(或說是變數)
然後每顆審查按鈕裡面對應著自己所在該列的tr陣列號碼
然後呢.....= =
我就卡關了....

我有找了個javascript的範例加以修改來發想找靈感..
大致如下：(未完成..因為還沒想到確切解決方法.= =)
http://jsfiddle.net/oh16h7cj/1008/

看更多先前的討論...收起先前的討論...

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-11-06 10:01:35 檢舉

簡單的做法就是vue.js + jquery
或是vue.js + axios
前題當然是：先學會vue.js
這樣你就明白如何控制資料就控制view

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-11-06 10:04:36 檢舉

[vue.js在此](https://vuejs.org/)
[axios在此](https://www.npmjs.com/package/axios)

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-11-06 10:04:59 檢舉

...一個留言不吃markdown的態度

king742171 iT邦新手 2 級 ‧ 2017-11-06 10:16:00 檢舉

我是不排斥學新東西啦...
也要看上頭願不願意給我時間...= =
目前還是先偏向用javascript找方法實踐..0.0

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-11-06 10:23:19 檢舉

還好吧！vue從學習到初階上手應該不用二天
總比你耗著想到了結果將來變得很難維護的東西好

king742171 iT邦新手 2 級 ‧ 2017-11-06 10:28:25 檢舉

好像有道理耶....= =
所以...
我現在Bootstrap4 主UI..
然後..用Vue當資料控制
用PHP做資料庫讀寫
用ajax或你說的axios來連結前台和後台PHP之間的資料傳遞~
是這樣的概念對吧~?!0.0

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-11-06 10:50:21 檢舉

vue.js算是前端框架，他可以省掉你很多資料跟畫面展示資料的麻煩。
而且只要控制資料，畫面就會跟隨資料有所變動。
也可以說就是更即時的更新你想要的東西。
axios就不多說了，一個ajax的fu

Rach iT邦新手 4 級 ‧ 2017-11-07 14:04:31 檢舉

覺得不太需要axios，native javascript就可以解決ajax的問題！
不過vue真的是個滿好上手且可以快速應用的麻雀框架，推推

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

小碼農米爾

iT邦高手 1 級 ‧ 2017-11-06 10:44:37

如果資料庫有做 id，可以這樣，php我不會所以只能表達意思XD

<button onclick="btn_click('$id')" type="button" class="btn btn-secondary btn-sm w-75" disabled>一般</button>

button 取到 id 直接 post 到後端，後端拿到 id 再去資料庫取資料出來。

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

king742171 iT邦新手 2 級 ‧ 2017-11-06 10:51:27 檢舉

你的想法沒有錯~
我一最一開始就是用這方法~
但後來拿掉~
原因有兩個~
第一...
我table上看到的資料是一個資料表..
但按鈕點進去後要搜尋的資料表示另一張資料表..
第二...
條件問題..
因為第一點的原因..
按鈕點進去要搜尋的第二張表..
需要第一張表裏面的部份資訊當條件..
所以只有id是不行的..

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-06 11:01:31 檢舉

來一個偷吃步

<button onclick="btn_click('$id', '$name', '$phone')" type="button" class="btn btn-secondary btn-sm w-75" disabled>一般</button>

king742171 iT邦新手 2 級 ‧ 2017-11-06 11:32:28 檢舉

OH....
我好像...
原本腦血管栓塞...
似乎打通了~!!0.0
突然想到以前自己做過的一個方法..0.0
立馬來試!!!

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-06 11:39:52 檢舉

哈哈，好奇是什麼~

登入發表回應

baida0630

iT邦新手 4 級 ‧ 2017-11-09 17:41:19

提供一個也是JQuery的方法

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".test1").click(function(){
        alert($(this).attr("iii"));
    });
});
</script>
</head>
<body>


<button class="btn btn-default test1" type="button" iii="123">
</body>
</html>

你可以在button裡面做一個沒意義的值(iii="") 然後透過.attr("iii") 可以讀取這個值的內容

iii是自定義的不一定要iii 只要是不跟html的原始tag衝突是都可以自由設定的