00:00
呃,下面呢,我把这个文件啊,我把它复制一份啊。这样我把它复制成多个,这样大家好好复习,一步一步来的啊。零九,我现在再写个W09。然后代码零九里面,我把它指向代码零九。保存一下。好,然后呢,JS里面咱们复制一个。零九。下面我要做一件什么事情呢,同学们。下面我想做的是。当我点击这个删除按钮。点击这个小图片的时候,他能帮我把这一行删掉。删完之后给我更新,总总计。好,我要做这么一件事情。所以呢,删除这个小图标,我们找到HTM页面啊。
01:04
HTM页面。也就是这些image嘛。就是这些一个一个的image。那么我们要找到image,其实我们就是找某一个T2当中的最后一个TD,最后一个TD里面的image标签是吧?这是没问题的。好,我们在window点,当页面加载的时候,负循环得到某一行。然后这边是绑定的是单价啊,单价相关的这边一个四啊。行,我们再继续。这是四,然后一个更新小记啊,更新小记这个是五。然后更新,总计这个是六啊。我们第七个。
02:01
绑定。删除小图标的点击事件。所以呢,我们要首先先找到这个小图标。Sales。是sales,是某一个TR里面所有的单元格。那么我们这个一脉井是不是在最后一个TD里面啊。那个数也能看出来01234啊,所以我们写中括号四。中华寺。就这样吧。点。First。菜。这是最后一个单元格,最后一个单元格内部的第一个节点,不计汤吗?这样就能找到image。VR找到他。当然我们可以判断一下image存在。image存在并且image点。Tag。等于等于啊,它是大写的啊,它全大写image。
03:01
这样我们就可以给他绑定时间了。绑定。单机事件。Image on click。Delete。啊,对应一下delete fruit就可以了。所以下面我们要写一下这个方法。Function delete。那这个方法咱们怎么来写呢?你这个image image在这呢,我们其实是可以获取到的if image存在。并且invite.sc element的存在。并且invent.s点。Imagine。世界元吧。当年是一麦。Image等于invent.element。然后呢?然后怎么做嘞。我这偏的问题啊T好。帮我看着啊,防止我拼写错了。
04:00
Image的负极点是谁?是不是TD啊?TP的负极点是谁?T。Parent element。那我拿到这TR之后,我想干嘛呢?我们查一下帮助文档。我们找一下table,我们table当中有一个方法,我们table里面有一个方法,这个方法叫delete。Delete,看到没有?Delete,删除入行,删除某一行。那这里面需要的是什么?需要的是一个index。比如说的delete的入小括号零表示删除第一行。二一表示删除第二行没问题吧。所以现在的问题就是我们已经我们已经拿到这个TR了,但是我们不知道他的这个索引。哎,你看一下是不是我们已经拿到这个TR了,这个TR其实我们要删除的嘛,但是我们怎么去获取到的,所以呢,再查一下TR。
05:01
TR这个元素它有个属性,它有一个属性叫roll index。OPQRSTR。Index。获取对象在表格的入集合中的位置看到了吗?叫z index就是他。行,那下面我们就有思路了。好,我们获取到这个表格,Fruit t BL等于document.get。A。By ID。好,这个叫T-float。我记得是叫这个。T-float,对的。好,拿到这个table,然后float t.delete入是不是啊。然后把我们T2.rowindex把它放进去对吧。这样就搞定了。当然,在这个里面我们可以先做个判断,If window.confirm确认一下是否确认删除。
06:01
啊,给别人一个提示,Alert表示弹出对话框。Alert表示弹出一个对话框。表示。弹出一个对话框,只有确定按钮。Confirm表示弹出一个对话框,有确定和取消按钮。取消按钮啊,两个按钮。当点击确定。啊,返回去。否则返回false。行吧,同学们。所以window.confirm如果我们点的是确定,那么它反回来就是去啊,是否确认删除当前行。是否确认删除当前库存记录,意思一下啊。好,如果yes,咱们把这些代码,把它挪进去,剪切,把它放进去。行吧,同学们就这样子,那当你操作完之后,请你再做一下RD的总计是吧。
07:02
Update,总计。好,我们来试一下。点一个。也不管用啊。这是零八啊零九。好,再点一下,哎,可以了吧,是否确认删除当前库存就点取消是不管用的,点一个西瓜啊,我们看一下西瓜点它。删掉了吧。再点一个删掉,再点一个删掉,再点一个删掉,是不是这样的,但是已经没有了。好,当然我一刷新就有了,因为咱们这些数据是是是假的嘛。啊,不着急,等我下次再上课的时候,这里面数据集是真的了啊,记得从数据库查出来了。行吧,同学们先不着急啊,好。行,这是我们的所完成的,删除某一行,我们就把这个功能要把它搞定了。再来。
08:03
下面呢,我要给大家讲的一个功能啊。下面我需要给他讲一个功能,再回到这个这边来。我鼠标放进去。用户可以输入数字,但是用户也可以输入abcd。那如果输入ABC,那就麻烦大了。是吧?你输入abcd,它就不是一个数字嘞。所以我们这边用户的输入,我们要进行检验。我们需要去进行校验。我必须只能让你输输字,你不能输其他的。我们怎么做呢?我们回到我们那个input,稍等一下啊。Input在哪里啊?编辑单价的时候a price在这这边有个硬input。我们这边绑定了一个叫input节点的一个on blue事件。我们除了绑定失去焦点事件,我们在这个硬input的这个节点上面啊,硬input的这个输入框吗?输入框上面我们还要绑定键盘按下的事件。
09:08
绑定一个键盘摁下的时间。好,咱们一起来看一下。好,这是第七个,下面我们来看第八个,回到这边来。绑定在输入框上。绑定。键盘摁下的时间。此处我需要保证用户输入的是数字。啊,此处我需要保证用户输入的是数字。如果你输的不是数字,我就当你没摁过,就这意思。好,我们怎么做呢?input.on key down。K不就是键盘吗?Keyboard键盘是吧?Down不是向下吗?当键盘按下的时候。当键盘按下的时候,我们来写一个,比如说叫嗯,写个方法叫什么呢。
10:03
切个硬的。啊,我就意思一下啊,写个叫切割音input的。所以我们来写个方法,Function,切个input,把它放在这。检验键盘按下的值。方法。好,这个写一下啊,这个叫更新单价的方法好。检验键盘按下的值的方法,呃,这里面怎么写呢,Invent。表示事件。Invent,我们invent有一个属性叫K扣的,大家帮我一起来看一下。这边一个属性叫T扣的。Set,或者是设置或者获取the code key。
11:01
关联的和键盘关联的当前的一个UNQ的这个值,那这啥意思哦。不知道,打印出来看一下吧。点扣的。我看一下这个C是否大写。大写的吧。大小JS里面大小写是敏感的啊,Java script当中大小写是敏感的。VRKC。我们把这个KC把它打印出来。好,我再教大家另外一个打印的方法。conso.logo。可以把KC打印出来,空手叫控制台。Log表示打印了控制台的这种日志。啊,咱们试试。好,回到这边来,右键我要点那个检查。点检查之后,我们才能看到控制台。这个叫空,能看到吗?空色控制台好。点进去刷新一下啊,刷一下。点进去我输入。零。
12:00
Yeah有问题哦。Is not DeFine,我都写错了,麻烦大了,C小写啊。C小写啊,刚才我写成大写了,写成大写写到人家C下边语言里面去了是吧。再点一下。零四十八。123后面不写了,直接输个九。零到九,他的阿斯格玛是不是48~57啊。把它记下来,我们把它记下来啊,回到这边来。零到。九。它对应的是48~57是吧。大家帮我想一想,除了这零到九这个数字键我是感兴趣的,还有什么键是感兴趣的呢?万一人家输数字输错了呢,他是不是要按这个back space键?删除键嘛,是吧,它按这个backpe键,我们看一下backpe键是多少。能听懂我在说啥不?
13:01
按一下删除键。是八是吧,回车键。回收键是13老师,你干嘛要扯上回收键呢?我的想法是,将来我就不想让人家去动鼠标,还在其他地方点一下,我既想让别人直接在里面敲回车,相当于点的是确定。能听到吗?好。所以我们把它记记下来啊。Backpace。它对应的是八。Enter键,呃,销售点不考虑那个就太复杂了。那个讲讲两天都讲不完啊,13好小数点不考虑啊。好,就这样子。OK。我们的目的,我们的目的不是想完完成这个真实的功能啊,我们的目的是想通过这种小案例,把咱们JS里面的盗墓操作,以及这些方法呀,试件员啊,把这些API把它练熟一些。啊,这个目这个目的达到就可以了,如果大家想要去做个计算器的话,还是有点小复杂的。啊,需要用到咱们大学里面学的数据结构的知识是吧,你小数点你输的时候,你还得考虑我有没有输两个小数点。
14:02
是吧,我小数点前面这个,如果我输数字,我先输的是零怎么办?等等等等啊,有一大堆的逻辑在里面啊。咱先不考虑啊。OK,那咱们再回到主题正题上来啊,现在这几个值啊,这几个ask码,这几个ask值,我已经把它全部记录下来了。那行,这个把注释掉。If。KC。如果KC,嗯,怎么写呢?如果是符合的情况,如果KC大于等于48。并且KC小于等于57。这是不是一个条件,同学们?不能被我绕进去啊,这是其中的一个条件。或者KC等于等于八。或者KC等于等于13,这是不是都是符合的条件啊,这都是正确的条件,行,我把它括起来。括起来,在外面加个感叹号。里面的是符合的情况,价格改了不就不符合吗?
15:02
如果是不符合的情况,我们就认为你什么都没有输入,什么键盘都没有摁。怎么让他什么键盘都没有摁呢,看一下。我看一下帮助文档。Invader。Invent它有个属性。叫return value。叫value。Set。设置或者获取the value from the image,我们看这两个值,它有两个值。True是我们的默认值,Default看一下force force是啥?你看一下啊。Action of the event on the object is说,发生在这个事件源对象上的这个事件的默认行为被取消。是不是这意思?那我们可以把它设置为false,就相当于没有摁嘛,相当于你没有摁键盘,就这意思。所以invent点是不是个叫啊。
16:00
Force。就这样的。我们来试一试。好,刷新一下。点一个我输入abcd,我真的在输入,我真的在输入啊,真的在按键盘,但是它没有效果,我按上面的数字键它就有效果,按下面的字母键它就没有效果。啊。鼠标呃,这个不考虑啊,如果如果还要再考虑鼠标右键的话,那就比较麻烦了,我们还要再去考虑你禁用的这个规则。因为你这是个硬input的文本框。我们这个value是把它附进去的,万一你再去拼接一些恶意的代码是吧,那就更麻烦了啊,不考虑那么复杂啊,这个大家很有学前端的潜质是吧。再来。再来,所以我们第一步啊,第一步简单的这个识别,咱们已经把它搞定了。再来。键现在肯定是可以用的啊。删除是吧,它都可以用的,那么还有一个是我现在敲回车,我敲回车的时候,我要求达到的效果是相当于失去焦点的效果,是吧,同学们。
17:08
所以我们可以单独的做个判断。If kc。Day。13是不是啊?13的时候,Invent当前这个事件src。Element世界园是不是硬铺的呀?不漏,我就直接这么写了啊,不漏。行吧,同学们,让他失去焦点,它只要失去焦点,是不是就触发它的失去焦点事件啊?我们已经给他的数据,焦点事件已经绑定了一个值了,是不是绑定了一个方法了,我们试试吧。A,呃,我输入一二,我敲回车,一敲回车是不是也可以啊,它也是没问题的。好,这是这个。好了,这是我们校验啊,这个键盘的输入。好,咱们再讲一个。
我来说两句