有個問題請教一下版上大大們~
我用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/
如果資料庫有做 id,可以這樣,php我不會所以只能表達意思XD
<button onclick="btn_click('$id')" type="button" class="btn btn-secondary btn-sm w-75" disabled>一般</button>
button 取到 id 直接 post 到後端,後端拿到 id 再去資料庫取資料出來。
你的想法沒有錯~
我一最一開始就是用這方法~
但後來拿掉~
原因有兩個~
第一...
我table上看到的資料是一個資料表..
但按鈕點進去後要搜尋的資料表示另一張資料表..
第二...
條件問題..
因為第一點的原因..
按鈕點進去要搜尋的第二張表..
需要第一張表裏面的部份資訊當條件..
所以只有id是不行的..
提供一個也是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衝突是都可以自由設定的