【javaweb】表格的隔行換色
需求分析:商品分類資訊太多,每一行都是同一個顏色會讓人看得眼花繚亂,為了提高使用者體驗,我們需要對錶格進行隔行換色。
目標樣例如下:
技術分析:
(1)確定事件:頁面載入完成事件onload
(2)觸發函式:init()
(3)函式操作:對錶格進行迴圈換色
原始碼如下:
<html> <head> <meta charset="utf-8" /> <title>商品隔行換色</title> <script> function init(){ var tab=document.getElementById("tab"); var rows=tab.rows; for(var i=0;i<rows.length;i++){ var row=rows[i]; if(i%2==0){ row.bgColor="red"; }else{ row.bgColor="grennd"; } } } </script> </head> <body onload="init()"> <table border="1px" width="1000px" height="300px" align="center" id="tab"> <tr> <td><input type="checkbox"/></td> <td>分類id</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td><input type="checkbox"/></td> <td>分類id</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td><input type="checkbox"/></td> <td>分類id</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td><input type="checkbox"/></td> <td>分類id</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td><input type="checkbox"/></td> <td>分類id</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> </table> </body> </html>
相關推薦
javascript 表格隔行換色
年齡 load ali pre char idt element round html 用到的知識點: 獲取表格元素 tbody 和 rows都是有索引的 這裏我們只有一組tbody所以 索引是0 偶數行 索引取余2為0 奇數行 索引取余2不為0 通過 遍歷行索
JQuery案例一:實現表格隔行換色
body ble () ++ doc cti seo head 姓名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t
JavaScript-表格隔行換色·滑鼠上移換色·合併顯示
HTML <table id="tab1" border="1" width="800" align="center" > <tr> <td cols
使用jQuery完成表格隔行換色
addClass(class):為每個匹配的元素新增指定的類名。 HTML 程式碼: <p>Hello</p> jQuery 程式碼: $("p").addClass("selected"); 結果: [ <p class="selected"&
使用EL+jstl實現表格隔行換色
使用<c:if>標籤實現隔行換色 要求:使用<c:set>標籤進行變數的設定 使用EL表示式獲取變數值,在使用<c:forEach>和<c:out>標籤實現10行以上表格的輸出(最少兩列,表格內容自定) 2.直接
JQ表格隔行換色
auto size clas wid 選擇 java highlight alt image <style type="text/css"> html, body { margin: 0; pa
Jtable表格隔行換色
1 奇偶行顏色顯示不同 package cn.edu.book.util; import java.awt.Color; import java.awt.Component; import javax.swing.JTable; import ja
jquery表格隔行換色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行換色</title> <link t
h5表格隔行換色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style ty
【javaweb】JQ實現表格的隔行換色
需求分析:商品分類資訊太多,每一行都是同一個顏色會讓人看得眼花繚亂,為了提高使用者體驗,我們需要對錶格進行隔行換色。 目標樣例如下: 步驟分析:1. 匯入JQ的包  
【javaweb】表格的隔行換色
需求分析:商品分類資訊太多,每一行都是同一個顏色會讓人看得眼花繚亂,為了提高使用者體驗,我們需要對錶格進行隔行換色。 目標樣例如下: 技術分析: (1)確定事件:頁面載入完成事件onload (2)觸發函式:init() (3)函式操作:對錶格進行迴圈換色
JavaScript表格的隔行換色
1. 確定事件: 文件載入完成 onload 2. 事件要觸發函式: init()
JQuery表格的隔行換色
01JQuery表格的隔行換色.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格的隔行換色</title> <sc
PHP隔行換色輸出幾行幾列表格。
<?php$table = '';function PrintTable($rows, $cols){ global $table; $table .= "<table width='700' border='1'>"; for ($i=1;$i<$r
表格外掛-bootstrap table的隔行換色
在寫表格外掛的時候,要不斷的進行表格優化,才會讓介面的感觀變得越來越好看,bootstrap table的隔行換色功能也是其中的一個,幾行程式碼就OK了。
用jstl實現表格的隔行換色
jstl的隔行換色 在tr標籤的裡邊加上程式碼: <tr ${vs.count%2==1? "style='background-color:red'" : "style='backgroun
利用JS實現H5中的Table表格的隔行換色
最近正在學習前端的知識,正好進行到JS的基礎階段,為了以後更好的找一份工作,開始自己的技術部落格的學習階段,下面是剛學習的結果,今天有三個作業,分別是利用JS實現Table的隔行換色,有一點點事件的繫結問題,自己第一次寫技術部落格,大家且將就著看,也有參考別人的內容,比如自己
在表格中隔行換色(js)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行換色</title> <script type="text/j
css和js處理隔行換色的問題
ron -o user XML use type scala tex sha <html> <head> <meta charset="utf-8"> <met
08-JS中table隔行換色
width asc script ctype use color .get har back JS中table隔行換色 1 <!DOCTYPE html> 2 <html> 3 <head> 4