高亮突显web页表格行的javascript代码,年里学习

20一七 年里学习 JavaScript 认为咋样?

2018/02/01 · JavaScript
· Javascript

本文由 伯乐在线 –
dimple11
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Bruce
Lewis。应接参加翻译组。

写给还没起来阅读本文的读者,本文是对《201陆年里做前端是怎么着一种体验》的回复。和其余人的回复差异,那篇作品包括了1款app
的完整代码,那款 app 与此前问到的那款类似。

问:

喂,笔者得到了二个新的web项目,不过老实说,小编曾经有几年没怎么敲过web代码了,而且本身读了些作品,发掘这几年web开荒近乎光景大变。你是走在最前面包车型大巴web开辟职员,对啊?

答:

本身认为能够如此说。

问:

很酷啊。小编索要成立一个力所能及体现用户最新活动的页面,所以小编仅需从REST终端获取数据,然后在某种过滤表中举办展示,并且当服务器产生变化时立时更新数据就能够。笔者在想是或不是能够用jQuery来得到和呈现数据吧?小编知道有立异的框架,可是那几个框架笔者越掌握反而越疑忌。

答:

jQuery难道不是几年前导致你不做web开辟的缘故吗?

问:

嗯,笔者感到温馨没做对,搞不清楚为啥自身的app总是状态离奇,只怕你能帮作者更加好地梳理组织jQuery代码,那样就不会接连麻烦重重了。

答:

何人都会高出那种事,为了应对变化无常的事件,用jQuery时会改换DOM结构,有的时候事件的拍卖顺序与大家所想的大不一致,所以对于什么进入壹种特定的情况,你相对会以为茫然。

问:

你不会想说服自身,让本身重回web开采之路吧。

答:

等一等,听自身说完。有了当代web框架,你的代码仅需反映数据状态是哪些映射到web网页的,这就一下子没那么难懂了。

问:

好的让本身来考虑一下……难道不是每一次数据一爆发变化就重绘三次网页吗?作者猜那样也能讲得通,笔者的用户都表未来桌面上,所以那没怎么大不断的,不过听上去那样会变成移动浏览器运营速度非常的慢。

答:

并不需每一回都重绘网页,今世框架非常智能,它亦可理清DOM哪一部分爆发了变化,然后只管理这一片段。

问:

那挺有意思的。那自身应该选取哪1种框架呢?使用的重头是React, Angular and
Ember,对啊?

高亮突显web页表格行的javascript代码,年里学习。答:

它们都很好用,若是您想在Handlebars写前端逻辑,用Ember;若是您想用HTML属性写前端逻辑,用Angular或Vue;借使你想用Javascript写前端逻辑,用React,Mithril
or Inferno。

问:

自家猜一般会用Javascript,不过难道React不用其余的吧……像JSX?

答:

JSX仅是Javascript的壹种语法增添,它能够让你利用HTML标签,从而免于因为写代码而生成DOM成分。

问:

只用JavaScript开采有哪些难点吧?

答:

实质上没什么大不断的主题素材,实际上Mithril的文本都以Javascript,小编也才意识给平素做HTML/CSS的人提供JSX代码时,得到的上报要比给他俩纯Javascript代码时要好得多。

问:

纯Javascript?作者很安心乐意笔者并不是绝无仅有2个对JSX未有完全适应的人。你说的都让作者想试一下Mithril了,Mithril很盛行吗?

答:

它太流行了,不会忽然未有,可是和更加大的框架比较,它的风靡水平还天壤之别。小编多年来事实上正在用Ember写1个相当霸气带感的web
app。不过思量到Ember隐藏了有个别一定的、笔者盼望您在加紧开采的经过中能够平素看见的东西,所以作者会很欢畅向您显得什么选用Mithril来运转app。

问:

太好了!几小时后大家树立的时候,你能给自家出示一下怎样建立具备的库、scaffolding和boilerplate代码吗?未来哪类模块打包工具更加好用呢,webpack仍然browserify?笔者只可以承认,安装进度是当代web开辟当中最让笔者有压力的。

答:

近日这几个你都得以整个跳过,一旦你对当代web开辟的主体有了一定的认知和认为,你仅仅复制一下本身做的就足以了,除了babel和rollup之外也没怎么了。搭建系统真的只是规划贰个今世web
app工程中极小的一有的。

问:

漫天跳过?但自个儿想让作者的web app实际不荒谬运作。

答:

您能够让它平常运作,我向你显得一下。大家今后用Mithril写你的app代码,你说它是一张过滤表,对啊?大家来把planets.html做成一张planets的过滤表。

XHTML

<!DOCTYPE html> <html> <body> <div
id=”app”>Loading…</div> <script
src=”; <script
src=”;
<script type=”text/jsx” src=”planets.jsx”></script>
</body> </html>

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <body>
    <div id="app">Loading…</div>
    <script src="https://unpkg.com/mithril/mithril.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx" src="planets.jsx"></script>
  </body>
</html>

问:

好啊,你来报告我Mithril 是何许。另1个库?Babel是什么?

答:

Babel让您使用部分浏览器不援助的今世Javascript语法,你不是非用它不行,但它能让您不用去管浏览器不帮助什么,只管敲代码。

问:

哦等等,实际上自身读到过这个内容,在浏览器中运作转译器不是倒霉啊?

答:

是糟糕,转译器会大增显然的推迟,可是为了学习,用转译器有怎么样尤其的呢?过后是很轻松再改的。未来大家透过树立app的动静,早先写planets.jsx文件。

问:

要告知您的是,笔者20分钟后要去开会,从本身所读到的来看,你一起初说“状态”,那么事情将要变复杂了。可能我们下次得以应该讨论Redux、Flux等。

答:

你写app用到它们的时候,我们得以聊聊。对于那个app,你只须要五个变量:planets数组和贰个过滤函数。

JavaScript

‘use strict’; /** @jsx m */ let planets; let planetFilter = planet
=> true;

1
2
3
4
5
6
‘use strict’;
 
/** @jsx m */
 
let planets;
let planetFilter = planet => true;

问:

等等,变量不是应有设为var,并且不可能设为let吗?

答:

它们是如出一辙的,除非let像C或Java中的变量一样有块级功用域,未有怎么hoisting。

问:

如此真的已经有1段时间了,作者都早就忘了hoisting了。

答:

你能够再而三拓展,也不用管它,给恐怕须要再钦定的变量定义为let,给别的的概念为const就行了。

问:

您说第二个是过滤函数,箭头是还是不是只是老式函数注明的1种简写呢?

答:

毋庸置疑,箭头函数和老式带bind(this)函数的语法大约千篇1律。

问:

哦是的,我回忆你曾通过增多bind(this)帮本人通查找并修复过漏洞,作者想小编会喜欢那几个箭头函数的。

答:

自身打赌你会的,现在大家写一下您app的顶层组件。

JavaScript

class PlanetApp { view() { return ( <section> <PlanetFilters
/> <PlanetTable planets={planets} /> </section> ); } }

1
2
3
4
5
6
7
8
9
10
class PlanetApp {
  view() {
    return (
      <section>
        <PlanetFilters />
        <PlanetTable planets={planets} />
      </section>
    );
  }
}

问:

1/10定是新的ES陆类语法,笔者喜欢它的外观式样,但小编不明确HTML和Javascript混在1块儿会怎么。

答:

不用将JSX看作混杂进Javascript的HTML,它和hyperscript,也便是开创HTML成分的Javascript是等价的。有很重大的一些要领悟:它所编写翻译的Javascript不会生成字符串;它发生的是因素的骨子里协会,比方说假如你的价签是不平衡的,就不会进展编写翻译。

问:

好呢,作者供给点时间来探视自家是还是不是会喜欢它。接下来,你能给自家出示一下PlanetTable组件吗?

答:

本来,那些的确是你app的骨干。

JavaScript

class PlanetTable { view() { return ( <table> <tr>
<th>Name</th> <th>Composition</th>
<th>Moons</th> </tr>
{planets.filter(planetFilter).map(planet => <PlanetRow
planet={planet} />)} </table> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class PlanetTable {
  view() {
    return (
      <table>
        <tr>
          <th>Name</th>
          <th>Composition</th>
          <th>Moons</th>
        </tr>
            {planets.filter(planetFilter).map(planet => <PlanetRow planet={planet} />)}
      </table>
    );
  }
}

绝大多数景况下它的剧情只是静态的,但您写的这一行简洁地描述了你app要干的事,要用到planets的2个数组,实行过滤,仅展现相应显得的,而且被过滤的数组会映射到HTML表中的行上。

问:

嗯,小编想笔者明天搞懂了!JSX语法只是Javascript的一种表现情势,所以自身能够随心所欲地操控它,作者猜PlanetRow
组件会变得万分简单,对啊?

答:

科学,多亏理解构赋值,它只怕会比你想像的尤为简明。

JavaScript

class PlanetRow { view(vnode) { const { composition, name, moons } =
vnode.attrs.planet; return ( <tr> <td>{name}</td>
<td>{composition}</td> <td>{moons}</td>
</tr> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
class PlanetRow {
  view(vnode) {
    const { composition, name, moons } = vnode.attrs.planet;
    return (
      <tr>
        <td>{name}</td>
        <td>{composition}</td>
        <td>{moons}</td>
      </tr>
    );
  }
}

问:

OK,所以本身猜你即使用vnode.attrs.planet来获得传入的planet属性的,只需写壹行,带个等号,就行了,所以必然……哇,解构赋值,这么长日子你都跑哪里去了?

答:

自家给您说,Javascript要比过去变得有趣得多啦。小编在那给您出示一下,以至当您仅思念简洁性那一点时,箭头函数都10分好用。

问:

好的,笔者晓得你讲的情景了,它们都以过滤函数,但自己打赌所牵扯的轩然大波管理器不容许那么简单。

答:

就那么简单,就是有点抽象。

JavaScript

class PlanetFilter { view(vnode) { const { key, func } = vnode.attrs;
return ( <label> <input type=”radio” name=”filter”
onchange={filterHandler(func)} /> {key} </label> ); } }
function filterHandler(filterFunction) { return function(event) { if
(event.target.checked) { planetFilter = filterFunction; } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class PlanetFilter {
  view(vnode) {
    const { key, func } = vnode.attrs;
    return (
      <label>
        <input type="radio" name="filter"
               onchange={filterHandler(func)} /> {key}
      </label>
    );
  }
}
 
function filterHandler(filterFunction) {
  return function(event) {
    if (event.target.checked) {
      planetFilter = filterFunction;
    }
  };
}

答:

但您须要去开会,又想看它的成效。既然您关系,你需求从服务器中获取数据,那自个儿来把部分多少扔到三个独门的planets.json文件中去。而且以后大家只要通过代码就能获取数据,然后把它们存到方便app获取的地点,进而积攒组成顶尖组件。瞧,能用了。

JavaScript

m.request({url: ‘planets.json’}).then(data => { planets = data;
m.mount(document.getElementById(‘app’), PlanetApp); });

1
2
3
4
m.request({url: ‘planets.json’}).then(data => {
  planets = data;
  m.mount(document.getElementById(‘app’), PlanetApp);
});

问:

实在吗,那就完了?哇,去年的时候还认为难得令人心神不属!作者得赶紧跑着撤了,但小编真的真的对重十Javascript满载梦想,太谢谢啦!

答:

本来,任几时候都招待找作者研究!

诚恳感激Biagio Azzarelli, Ben Chauvette, Garrick Cheung and 帕特rik
Johnson对那篇小说的文稿给予的申报意见。

1 赞 1 收藏
评论

唯独小编要直面包车型地铁是2个很松散的HTML页面,不恐怕XML
所以,本文的关键在于一旦要赚取的网页中有Table或List段落,必要将那几个段子的新闻依据列的点子保存到JS的数组中
向来贴代码:

本篇作为支付学习笔记之一。
[文]
在web开采中不时碰着须要加亮鼠标指向的表格行的情状。首先说说一般的情况。
·轻松尝试
CSS第22中学允许大家对HTML成分使用hover伪类,那庞大的便宜了对于表格的体制的主宰。
我们从3个小例子发轫:
XHTML(只列出了报表部分,请自行补完页面,本例在Transational的DTD下通过):

Django的相干知识琐碎整理

有关笔者:dimple11

亚洲必赢官网 1

简要介绍还没来得及写 :)
个人主页 ·
小编的著作 ·
15

亚洲必赢官网 2

复制代码 代码如下:

复制代码 代码如下:

js:JavaScript1种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置帮忙项目。
是1种网络脚本语音,被布满应用于web开拓,常用来为网页增加有滋有味的动态功用为用户提供特别通畅美观的浏览器效果。
常用:
一)嵌入动态文本于HTML页面
二)对浏览器事件作出相应
3)读写HTML元素
四)数据被提交到服务器从前验证数据
5)检查评定访客的浏览器音讯
六)调控cookies,包括创制和改变等
7)基于Node.js技能拓展服务器端编制程序

var str =
“字符串字符串<table><tr><th>ID</th><th>姓名</th><th>电话</th></tr><tr><td>0壹</td><td>张三</td><td>123456七</td></tr><tr><td>0二</td><td>李肆</td><td>34343四</td></tr><tr><td>03</td><td>王伍</td><td>685654</td></tr></table>字符串字符串”;
var regRecord = new
RegExp(‘\\<tr>\\<td>([0-9]{2})\\<\\/td\\>\\<td>([^\\<]+)\\<\\/td\\>\\<td>([0-9]+)\\<\\/td\\>\\<\\/tr\\>’,’g’);
var fieldIndex = { ‘Id’ : 1 , ‘Name’ : 2 , ‘Phone’ : 3 }
var g_records = [],record;
while ((record = regRecord.exec(str)) != null){
g_records.push({
‘Id’ : RegExp[“$”+fieldIndex.Id]
,’Name’ : RegExp[“$”+fieldIndex.Name]
,’Phone’ : RegExp[“$”+fieldIndex.Phone]
});
}
//此时 g_records 就封存了非凡的多寡表格,打字与印刷出来看看:
for(var i=0;i<g_records.length;i++){
alert(“ID:” + g_records[i].Id + “;Name:” + g_records[i].Name +
“;Phone:” + g_records[i].Phone);
}

<table class=”datatable” cellspacing=”0″>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr class=”oddRow”>
<td>项目Item1</td>
<td>值Value1</td>
</tr>
<tr class=”evenRow”>
<td>项目Item2</td>
<td>值Value2</td>
</tr>
<tr class=”oddRow”>
<td>项目Item3</td>
<td>值Value3</td>
</tr>
<tr class=”evenRow”>
<td>项目Item4</td>
<td>值Value4</td>
</tr>
<tr class=”oddRow”>
<td>项目Item5</td>
<td>值Value5</td>
</tr>
<tr class=”evenRow”>
<td>项目Item6</td>
<td>值Value6</td>
</tr>
</tbody>
</table>

<th> <td>
<tr>都是用于表格单元格展现,<table>是她们的上层标签,他们不能单独选拔,也等于属性标签。
<th>:定义表格内的表头单元格,此单元格中的内容一般为粗体
<tr>:表示表格中的某1行
<td>:表示表格中的某1列,必要安置在<tr>中
一行两列的代表如下:
<table>
<tr>
<td> </td>
<td> </td>
</tr>

您大概感兴趣的稿子:

  • JavaScript正则替换HTML标签效应示例
  • php正则去除网页中享有的html,js,css,注释的得以达成形式
  • Java/Js下利用正则表明式相配嵌套Html标签
  • javascript下2个上升html代码的正则
  • JS正则表明式获取字符串中一定字符的方法
  • javascript
    获取url参数的正则表明式(用来得到有个别参数值)
  • 在JavaScript中赢得请求的ULacrosseL参数[正则]
  • Javascript
    获取链接(url)参数的艺术[正则与截取字符串]
  • node.js正则表明式获取网页中全体链接的代码实例
  • JS获取网站中钦点值的正则函数
  • javascript
    获取链接文件地点中率先个斜线内的正则表达式
  • javascript使用正则获取url上的某部参数
  • JS正则获取HTML成分的格局

然后用CSS定义了报表的体裁:

</table>

<td>,<tr>必须放入<th>Nelly用
<th>为表格标题
<caption>为首部求证
<thead>为表格底部
<tbody>为表格主体内容
<tfoot>为表格尾巴部分
标准表格模型
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>

在html中,<%**********%>里面能够写程序语音
WSGI:python服务器的网关接口
O凯雷德M:对象关联映射,消除面向对象与关周到据仓库储存在的互不相称的光景
相似的web框架:浏览器->WSGI->路由系统->业务处理逻辑->数据库与模板耦合—>一):static文件包涵HTML,CSS,JS等;二)O陆风X八M数据库

MVC架构:
Model:定义数据库的有关内容,一般位于models.py文件中
View:定义HTML等静态网页文件相关,即html、css、js等前端的东西
Controller:定义业务逻辑相关,主要代码

Django规范的业务流程:浏览器请求<–>WSGI–>URAV肆Ls–>Views–>一)models(O福特ExplorerM,数据库);2)Templates(Static)
Django学习的始末:
一)目录结构正式
2)U路虎极光Ls路由艺术
3)Settings配置
4)ORM操作
五)模板渲染
6)other

Django项目标目录结构:
一)文件夹-与类小名同名的安顿文件
2)templates:存放html文件,也存放T文件
3)manage.py:项目管理文件
与品种名同名的公文夹中存放的公文有:
1)__init__.py
贰)setting.py:主配置文件
3)urls.py:url路由文件
四)wsgi.py:网络通讯接口

每一个Django项目中带有多个app,格外与大型系统中的子系统、子模块、子作用,各个职能类别里头互相比较独立,但又存在着关系,全部app共享项目能源。
创建app命令:python manage.py startapp XXX

urls.py路由编写
from cmdb import views #导入对于app的views文件
urlpatterns=[
url(r’index/’, views.index),
#参数壹:网页搜索路线;参数二:业务逻辑函数
]

views.py业务逻辑编写
from django.shotcuts import HttpResponse #导入HttpResponse模块
def index(request): # 封装了用户请求的有着剧情
return HttpResponse(‘hello world’) # 由这么些类包装起来实行重返

此时,将index这几个url指向了views里面包车型地铁index()函数,它接受用户请求,并赶回字符串

运行web服务
方法1:命令行 python manage.py runserver 127.0.0.1:8000
方法2:pycharm运行

无非再次回到字符串可不行,日常都以将html文件再次回到给用户,那么就必要在用户请求的时候,访问对应的html文件
views.py业务逻辑操作
from django.shortcuts import render
修改index中的再次回到函数
def index(request):
return render(request, ‘index.html’) #
当须求回到3个html文件时,就须求render举办打包

要让django知道我们的html文件在哪个地方,需求修改settings文件的内容,默许意况下无需修改,广泛适用

行使静态文件:前端3大块,html,css,js还有种种插件,他们齐全才是贰个完全的页面,在django中,一般将静态文本存放在static目录中。

为了让django找到那么些目录,如故要求对settings.py举办安装
STATIC = ‘/static/’
STATICFILES_DIRS=(
os.path.join(BASE_DIR, ‘static’),
#先是个参数是系列路径,第二个参数是安装目录的名字,因为是个元组,前面包车型地铁逗号无法轻便
)

也得以在html文件中,引入js文件了:
<script src=’/static/js/jquery-1.12.4.js’><script>

经受用户发送的数码,用户同url发出3个做客请求,然后将在素齐全的html文件还给了用户浏览器,但web服务器和用户之间平昔不动态交互。
统一准备三个表单,让用户输入用户名和密码,提交给index这些url,服务器收到这几个多少

回到动态页面:大家接收用户数量后,再次回到给用户的依旧是静态页面,日常大家会依据用户的数目,进行拍卖后赶回给用户。
改造views.py文件
# 制造用户新闻列表,预约义七个数据,重回给浏览器,体现给用户
user_list = [
{‘user’:’jack’, ‘pwd’:’123′},
{‘user’:’alice’, ‘pwd’:’456′},
]
def index(request):
if request.method == ‘POST’:
username = request.POST.get(‘username’, None)
password = request.POST.get(‘password’, None)
temp = {‘user’:username, ‘pwd’:password}
user_list.append(temp)

return render(request, ‘index.html’, {‘data’:user_list})
#
render方法接收第多个参数是后台重临给浏览器的数额,它是一个字典,data是您自定义的指针名字,他会被相应的html文书档案引用即本文的index.html

那时,框架已经主导成型,就差多少了用户存款和储蓄数据,自带O奥迪Q3M框架操作数据库,并含有轻量级的sqlite三数据库。
一)注册:在settings中注册你的app,不登记它,数据库不掌握给哪个app创建表
二)在settings中,配置数据库相关的参数,即便运用自带的sqlite,不要退换
三)编辑models.py文件,也是就MTV中的V,操作数据库相关
from django.db import models
#参数中,承继这几个类,固定写法
class UserInfo(models.Model):
# 成立1个字段,最大尺寸3二,类型是char
user = models.CharField(max_length=32)
pwd = models.CharField(max_length=32)

四)通过终点创立数据库的表
python manage.py makemigrations
python manage.py migrate
五)修改views.py的事体逻辑
from cmdb import models

def index(request):
if request.method == ‘POST’:
username = request.POST.get(‘username’, None)
password = request.POST.get(‘password’, None)
#从用户那里得到数据保存到数据库
models.UserInfo.objects.create(user=username, pwd=password)
# 从数据库中读取全数的数额
亚洲必赢官网 ,user_list = models.UserInfo.objects.all()
return render(request, ‘index.html’, {‘data’:user_list})

复制代码 代码如下:

.datatable{
margin:15px auto;
width:500px; /*那两行能够依赖须要修改,仅为示范*/
}
.datatable,.datatable tr,.datatable td,.datatable th,.datatable
.tableheader td{
border:1px #0073ac solid;
border-collapse:collapse;
padding:3px;
}
.datatable .tableheader td,.datatable th{
font-weight:bold;
background:#fff url(images/thead.png) repeat-x;
padding:8px 5px;
}
.datatable tr:hover{
background-color:#cfe9f7;
}

对此css的局地,不做过多解释。请留意最终加粗的片段,对tr成分应用了伪类hover的体制。那在对CSS贰协助的浏览器下(IE7+,FF,Opera,Safari等)运作的特别完美。然则CSS一仅提供对于锚成分a的伪类帮助,遗憾的是IE六依旧只补助CSS一的伪类。于是大家要实行改变,提供对于IE6的支撑。
首先扩展1个样式:

复制代码 代码如下:

.datatable .trHover,.datatable tr:hover{
background-color:#cfe9f7;
}

那边扩展了一个trHover的类,用以改良IE陆下的展现。接下来正是书写javascript了。最初的主见相当轻便,你不是要鼠标指向时高亮当前行么?于是就对每1行采纳javascipt呗。首先写一个javascript的函数。为了统一小编把加亮和撤消加亮合并到叁个函数中了,那样就足以简化函数调用,对tr的mouseover和mouseout事件绑定3个函数就行了。

复制代码 代码如下:

function highlightTr(o){
var regStr=/\b\s*trHover\b/g; /*正则表达式过滤trHover类*/
if(o.className.indexOf(‘trHover’)==-1)
o.className+=” trHover”;
else
o.className=o.className.replace(regStr,””);
}

此地用到一个小手艺:正则表达式替换。因为你的tr成分也许有其余样式(类)——举个例子本例的evenRow和oddRow,所以无法大约的在撤除高亮时把对象的className置空。然后就如大家想像的,给tr绑定事件吧:

复制代码 代码如下:

<tr class=”oddRow” onmouseover=”highlightTr();”
onmouseout=”hightlightTr();”>
<td>项目Item1</td>
<td>值Value1</td>
</tr>

给具备的tr写上事件绑定就可以了。不过这么做也有毛病:壹、扩大了页面包车型大巴代码量。二、如果表格是由后台服务端程序输出的,有时不允许你给tr成分绑定javascript函数。怎么办?直接的想,能够用js在页面某范围里寻觅该样式的报表,然后绑定tr的事件。不过大家后日换个思路,直接对table成分绑定js事件,达成对某1行的高亮!
那种主张是有依附的。那只好说说浏览器的事件模型。由于历史由来,各个浏览器在促成javascript事件响应上有差别,不过基本思路依旧同样的。js事件在W3C
DOM中被描述成捕获-冒泡模型。简单来讲有点像下饺子,饺子逐步沉到锅底,接受了热传递,逐渐漂到上边。回到模型自身,javascript事件有两大类,首先从最外层的因素捕获事件,渐渐向内传递到触发事件的要素——那叫事件捕获,然后再稳步向外扩张到外围成分——这名称叫事件冒泡。IE的落到实处不帮助捕获类型的风云,对冒泡型事件的达成与W3C
DOM规范也略有差距,但总体思路是同等的。
说了半天,大家本次正是想用事件的冒泡管理机制来完毕高亮表格行的目的。
再也重申,冒泡事件是从触发javascript事件的最内层成分扩散到外围的,如同石子激起的涟漪同样。鼠标滑过某壹行,首先最内层成分例如td里的文件或许其余因素触发mouseover,接下去传到td–>tr–>tbody–>table依次响应mouseover事件,鼠标移出时,也有那种依次冒泡的经过。那正是大家如此处监护人件响应程序的依据。
首先,我们需求修改XHMTL中的事件绑定代码。去掉tr成分中mouseover和mouseout的事件管理,随后给table加上事件管理。最终表格形成那样:

复制代码 代码如下:

<table class=”datatable” cellspacing=”0″ onmouseover=”highlightTr();”
onmouseout=”highlightTr();”>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr class=”oddRow”>
<td>项目Item1</td>
<td>值Value1</td>
</tr>
<tr class=”evenRow”>
<td>项目Item2</td>
<td>值Value2</td>
</tr>
<tr class=”oddRow”>
<td>项目Item3</td>
<td>值Value3</td>
</tr>
<tr class=”evenRow”>
<td>项目Item4</td>
<td>值Value4</td>
</tr>
<tr class=”oddRow”>
<td>项目Item5</td>
<td>值Value5</td>
</tr>
<tr class=”evenRow”>
<td>项目Item6</td>
<td>值Value6</td>
</tr>
</tbody>
</table>

和初期大家写的报表比较,只多了table成分的js事件绑定。接下来正是给大家的hightlightTr函数做个大手术了!那里先把最后的代码贴出来然后共同分析:

复制代码 代码如下:

<script type=”text/javascript”>
//<!-[CDATA[
//该函数勘误IE6不能够识别TBMWX3成分hover伪类的bug
function highlightTr(){
var theEvent=window.event||arguments.callee.caller.arguments[0];
var srcElement = theEvent.srcElement;
if (!srcElement)
{
srcElement = theEvent.target;
}
if(!srcElement.parentNode) return false;
var o=srcElement.parentNode;
while(o.parentNode&&o.tagName!=”TR”)
{
if(o.tagName==”TABLE”) break;
else o=o.parentNode;
}
var regStr=/\b\s*trHover\b/g;
if(o.className.indexOf(‘trHover’)==-1)
o.className+=” trHover”;
else
o.className=o.className.replace(regStr,””);
}
//]]>
</script>

修改后的hightlighTr的版本的思路是这么的:1、处监护人件,得到触发javascript事件的页面成分。二、搜索它的父节点,直到找到tr。3、进行体制管理。
值得一说的就是赢得触发事件要素的有些思量了浏览器兼容性。IE的风云模型里window对象有二个event属性,而W3C
DOM规范event对象必须作为唯一参数字传送给事件管理函数,于是它便存在于函数的三个隐藏的参数(在参数列表第0个)里。接下来正是防止万分的一对论断之类的了。最终促成照旧由修改成分样式表来达成。
至此整个包容差别浏览器的高亮表格行的游览甘休了(好长的定语-口-)。很有意思吧~
文中难免疏漏差错,若是对本文有提议或意见迎接研讨指正~ ^_^

您只怕感兴趣的小说:

  • JavaScript版代码高亮
  • ASP语法高亮类代码
  • 用js查找法完毕当前栏目标高亮展现的代码
  • js包容IE陆,IE柒菜单高亮呈现效果代码
  • javascript网页根本字高亮代码
  • fckeditor 代码语法高亮
  • Javascript兑现的CSS代码高亮展现
  • tinyMCE插件开辟之插入html,php,sql,js代码
    并代码高亮呈现
  • 三种轻便达成菜单高亮展现的JS类代码
  • javascript
    关键字高亮呈现落成代码
  • 迅猛的报表行背景隔行变色及选定高亮的JS代码
  • jQuery语法高亮插件援救各类程序源代码语法着色加亮
  • 分享一多少个美化代码的代码语法高亮工具
  • 用JS将追寻的要害字高亮展现达成代码
  • 何以落到实处正则表明式的JavaScript的代码高亮
  • 201四最热门的JavaScript代码高亮插件推荐
  • 201⑥年最吃香的一四款代码语法高亮工具,美化你的代码
网站地图xml地图