【javaweb】表格的隔行換色

阿新 • • 發佈：2019-01-12

需求分析：商品分類資訊太多，每一行都是同一個顏色會讓人看得眼花繚亂，為了提高使用者體驗，我們需要對錶格進行隔行換色。

目標樣例如下：

技術分析：

（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

【javaweb】表格的隔行換色

相關推薦