該分頁(pagination)的表單程式是每5行就分出一頁,可以往前跳頁、往後跳頁,都成功了!
接著我開始增加內容,在第一列、第二列各增加一個測試程式及連結時,測試結果是:這網頁裡面的測試程式1及測試程式2的連結都是無法連結出去的? 非常奇怪!! 不知是何原因造成的? 如何解決?
所使用的html程式碼是:
<table id="myTable">
<tr>
<th>Date</th>
<th>Testing Progeam</th><th>Result</th>
</tr>
<tr>
<td>2023.02.22</td>
<td><a herf="https://www.lohashare.com/popup-window-after-5s.html">1, Popup & Email in FormSubmit</a></td><td>No email</td>
</tr>
<tr>
<td>2023.02.22</td>
<td><a herf="https://www.lohashare.com/popupwindowtest.html">2, Popup & Email in FormSubmit</a></td><td>No email</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Code & Scripts</td>
<td>Result</td>
</tr>
<tr>
<td>row #4 col1</td>
<td>row #4 col2</td>
<td>row #4 col3</td>
</tr>
<tr>
<td>row #5 col1</td>
<td>row #5 col2</td>
<td>row #5 col3</td>
</tr>
<tr>
<td>row #6 col1</td>
<td>row #6 col2</td>
<td>row #6 col3</td>
</tr>
<tr>
<td>row #7 col1</td>
<td>row #7 col2</td>
<td>row #7 col3</td>
</tr>
<tr>
<td>row #8 col1</td>
<td>row #8 col2</td>
<td>row #8 col3</td>
</tr>
<tr>
<td>row #9 col1</td>
<td>row #9 col2</td>
<td>row #9 col3</td>
</tr>
<tr>
<td>row #10 col1</td>
<td>row #10 col2</td>
<td>row #10 col3</td>
</tr>
<tr>
<td>row #11 col1</td>
<td>row #11 col2</td>
<td>row #11 col3</td>
</tr>
<tr>
<td>row #12 col1</td>
<td>row #12 col2</td>
<td>row #12 col3</td>
</tr>
<tr>
<td>row #13 col1</td>
<td>row #13 col2</td>
<td>row #13 col3</td>
</tr>
<tr>
<td>row #14 col1</td>
<td>row #14 col2</td>
<td>row #14 col3</td>
</tr>
<tr>
<td>row #15 col1</td>
<td>row #15 col2</td>
<td>row #15 col3</td>
</tr>
<tr>
<td>row #16 col1</td>
<td>row #16 col2</td>
<td>row #16 col3</td>
</tr>
</table>
<script src="./pagination/script.js" type="text/javascript"></script>
放在HTML網頁的table標籤中的id是myTable,它是來自表頭head標籤中的Style CSS,如下:
<link rel="stylesheet" href="pagination/style.css" type="text/css"/>
放在HTML網頁的script標籤來源src是來自Javascript程式,如下:
/* =================================
** ==== Simple Table Controller ====
** =================================
**
**
** With Pure JavaScript ..
**
**
** No Libraries or Frameworks needed!
**
**
** fb.com/bastony
**
*/
// get the table element
var $table = document.getElementById("myTable"),
// number of rows per page
$n = 5,
// number of rows of the table
$rowCount = $table.rows.length,
// get the first cell's tag name (in the first row)
$firstRow = $table.rows[0].firstElementChild.tagName,
// boolean var to check if table has a head row
$hasHead = ($firstRow === "TH"),
// an array to hold each row
$tr = [],
// loop counters, to start count from rows[1] (2nd row) if the first row has a head tag
$i,$ii,$j = ($hasHead)?1:0,
// holds the first row if it has a (<TH>) & nothing if (<TD>)
$th = ($hasHead?$table.rows[(0)].outerHTML:"");
// count the number of pages
var $pageCount = Math.ceil($rowCount / $n);
// if we had one page only, then we have nothing to do ..
if ($pageCount > 1) {
// assign each row outHTML (tag name & innerHTML) to the array
for ($i = $j,$ii = 0; $i < $rowCount; $i++, $ii++)
$tr[$ii] = $table.rows[$i].outerHTML;
// create a div block to hold the buttons
$table.insertAdjacentHTML("afterend","<div id='buttons'></div");
// the first sort, default page is the first one
sort(1);
}
// ($p) is the selected page number. it will be generated when a user clicks a button
function sort($p) {
/* create ($rows) a variable to hold the group of rows
** to be displayed on the selected page,
** ($s) the start point .. the first row in each page, Do The Math
*/
var $rows = $th,$s = (($n * $p)-$n);
for ($i = $s; $i < ($s+$n) && $i < $tr.length; $i++)
$rows += $tr[$i];
// now the table has a processed group of rows ..
$table.innerHTML = $rows;
// create the pagination buttons
document.getElementById("buttons").innerHTML = pageButtons($pageCount,$p);
// CSS Stuff
document.getElementById("id"+$p).setAttribute("class","active");
}
// ($pCount) : number of pages,($cur) : current page, the selected one ..
function pageButtons($pCount,$cur) {
/* this variables will disable the "Prev" button on 1st page
and "next" button on the last one */
var $prevDis = ($cur == 1)?"disabled":"",
$nextDis = ($cur == $pCount)?"disabled":"",
/* this ($buttons) will hold every single button needed
** it will creates each button and sets the onclick attribute
** to the "sort" function with a special ($p) number..
*/
$buttons = "<input type='button' value='<< Prev' onclick='sort("+($cur - 1)+")' "+$prevDis+">";
for ($i=1; $i<=$pCount;$i++)
$buttons += "<input type='button' id='id"+$i+"'value='"+$i+"' onclick='sort("+$i+")'>";
$buttons += "<input type='button' value='Next >>' onclick='sort("+($cur + 1)+")' "+$nextDis+">";
return $buttons;
}
其中 style CSS 程式是以link方式引自style.CSS檔案,如下:
* {
margin: 0;
padding: 0;
text-align:center;
}
body {
background-color: #fafafa;
}
table {
color: #333;
font-size: .9em;
font-weight: 300;
line-height: 40px;
border-collapse: separate;
border-spacing: 0;
border: 2px solid #ed1c40;
width: 500px;
margin: 50px auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.16);
border-radius: 2px;
}
th {
background: #ed1c40;
color: #fff;
border: none;
}
tr:hover:not(th) {background-color: rgba(237,28,64,.1);}
input[type="button"] {
transition: all .3s;
border: 1px solid #ddd;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
font-size: 15px;
}
input[type="button"]:not(.active) {
background-color:transparent;
}
.active {
background-color: #ff4d4d;
color :#fff;
}
input[type="button"]:hover:not(.active) {
background-color: #ddd;
}
最後所呈現的畫面是在這個測試網址:https://www.lohashare.com/tablepaginationtest.html
在你提供的 HTML 有個拼寫錯誤:請將 herf 更正為 href