00:02
我们刚刚已经把这个鼠标悬浮啊,以及悬浮在上面变成手的这个形状,我们已经把它搞定了。呃。稍等一下啊。零九我想想啊,代零九我先不新建,因为刚刚代零八是我刚刚新建的是吧,其实也没有做什么太多事情啊,我们就接着在代零八上面再接着写。308.gs啊,我们接着在这边看。我们仅仅是做了一个优化,就是把这里面的事件绑定全部转移到这个地方来了,是吧,同学们。好,下面我要做的一件事情看好了,同学们,下面我需要做的一件事情是,当我鼠标在单价上面,我可以点击。当我一点击它,里面出现一个文本框。一点击它里面就出现一个文本框,表示我可以在里面进行编辑,明白吗?啊,应该能想得出来啊。我现在做这么一件事情。所以。所以其实啊,就是我们这个单价这个单元格被点击的时候,也就是说我需要在这边写on click。
01:02
表示点击on表示当什么什么时候嘛,是吧,On click应该是等于。啊,等于ad的price,那么我说过。啊,我说过我们这个就不要在这边再这么去写了。是不是我们应该找到这个TD,然后呢,通过javascript代码给他进行绑定吧。啊,所以这边我就不不这么写了啊,删掉。我们回到这边来。呃,TDTD的话是不是就是当前的,我看一下啊,往上走的。然后是不是就是这边的这个price TD啊。就是他。好,所以呢,我接着在这边写。第三个。绑定鼠标点击单价单元格。单元格的事件。啊,点击单价单元格的事件。好,我们写一下price t.on click啊,当点击的时候,我调用一下a price。
02:00
我调用一下这个方法叫a price,所以下面我来写一下。当鼠标点击。点击单价。单元格时进行价格编辑。Function price,我们写在这。当我点击的时候,事件源是不是发生在这个单元格上面啊。If invite存在,并且点src。A的存在。并且invent.src。Element e有一不能拼错了啊,点tag。等于等于。TD。好,这样我就能获取到这个TD price TD。等于SC。叫invent.element。再来。我拿到这个price TD之后。拿到它之后。
03:00
我怎么做呢?这是一个单元格,诶。一个节点听好了任何一个节点。我们这种元素节点不能说任何一个节点啊,我们的元素节点它有一个方法啊,或者有个属性吧,不叫方法啊,叫属性叫阴的。In叫什么?什么?内部in HTML。因了HTL,我可以给它赋个值。就表示我在这个TD的内部去附上一段HTML代码。In的HTML。表示设置当前节点的内部HTML。所以这个TD内部我附上什么HTML呢?看好了input type等于text。这是啥?这是不是我们的文本框,我们讲表单的时候讲过的吧,这是一个文本框,那这边我用的是单引号,JS当中单引号双引号都一样的。
04:01
JS里面你不要认为有字符和字符串之分,都是字符串。哪怕你就一个字符,它也是字符串,所以用双引号,用单引号都一样,因为我外面已经用了双引号了,所以里面你就不要用双引号,用单引号好不好?就这样子。这样我就让这个price TD内部出现一个文本框,当我点击的时候执行这个方法,执行这个方法的时候,这个单元格内部就出现了一个文本框。试试吧。回到这边来。刷新一下,点一下。点一下点一下点一下是吧。他就能出现,我们慌了,哎,就是这样的。那当然了,这文本框这个太长了,咱把文本框设置一下。啥意思?啊,通过size可以设置。比如说四啊,默认情况下,你显示的是四个字符的这个长度点一下。你看这样是不是就比较小了。第二个问题是。第二个问题是,我一点击它,人家以前那个上面的数字就没了。
05:02
我们最好是一点击把数字给我自动的显示到里面去嘛。所以我在in呢HTML之前,在他之前。Price TD看好了点。In the text,猜一下呗。表示设置或者获取当前节点的内部文本。In text text文本嘛,获取它的内部文本。我们把它获取一下,VR叫price,这是表示旧的这个价格叫price。我们就可以把它获取下来了,获取下来之后我就可以,我就可以设置到。看好了啊,设置它内部的这个节点里面的一个value属性嘛。这个input是不是有个外流属性啊。
06:01
请问这句话执行完之后。Input和这个price TP是什么关系啊?是不是相当于我有个TD?然后这个TD内部,它是不是相当于一个input type等于text size等于四。是不是这样的,同学们,它应该是这么一个关系。啊,这边咱们就不换行啊。是不是这样的,本来我这个TD里面有的是什么,本来我里面比如说有个五块单价嘛。这个五是不是叫inner text是不是被我付给的变量了?赋给了变量之后,我再把这一坨。再附到这个TD的内部去,是不是就把它给覆盖掉了。那就变成这个形式了。能听懂我意思不就变成这个形式了,那行变成这个形式之后。变成这个形式之后,所以看好了。TD点看好了。First child。
07:03
菜的叫直接点。First,第一个子节点,TD里面当前这个标签是不是就只有一个子节点,就是input的节点是吧?同学们啊,就这节点,所以我们可以获取到。VR input等于套。当然,咱们可以做个判断,以防万一。input啊,Input它必须得是一个什么呢?它必须得是一个元素节点,点它的tag。等于等于,必须得是硬input全大写啊。必须是这样,然后input.value我们给它value赋值,附上附上old price。搞定。我们来试一下。刷新一下。点一个。在里面了吧。哎,剑姬在里面了。我不仅要让他在里面,在里面之后,人家用户还要再点进去,还要再选一下,然后你才能输入。啊,这边还有个小bug,你看啊,我点一下,我点这里面是没有问题的,你看我点外面,我点这注意看啊点这。
08:03
看到了吗?是不是就消失了?为什么会消失的?那肯定是bug嘛,对吧,这这为什么会消失呢。是啊,按道理来说,我点那边你应该你应该这个这个这个应该是不变嘛,是吧。为什么呢,同学们?啊,这是我点的这个TD。是这样的,同学们大家想一想,我第一次点这个TD的时候,请问一下这个old prize是不能获取到,我可以获取到你的in the text。请问一下我第二次再点的时候,它里面是不是已经有input节点了,那它里面还有in the text吗?是不是就没有了,那你第二次再点的时候,获取到的in text是不是就是空的呀,结果你把这空的附给这个value。哎,是吧,同学们。怎么感觉好像有回音啊?
09:02
再来啊。不行,好像好好好厉害。喂喂。现在还有会议吗?啊,还有回音啊。喂。好,就就就这吧啊。再来。我们再来看啊,再来看。我把这个讲完啊。那么我把这个O的value。感觉不对啊,我感觉回音有点重,稍等我先暂停一下啊。所以说这个地方呢,我们如果想解决这个问题的话啊,刚才我们已经分析了。如果你里面已经有一个input节点了,你再去获取它的in text是不是就没有了,人家就没有in的text,所以获取到这个这个这个这个值啊,就是空的,那你把一个空的值付给它的value流当然就不对了。啊,所以我们我们这边呢,如果我们要去,我们可以去做个判断。我们是可以去做个判断的。
10:01
我们这边获取到price TD已经获取到了。然后呢,我可以在里面再继续去判断。我可以继续去斑的,在这个地方。Td.first child是不是我获取你的第一个直接点?那么节点呢?它有什么呢?叫节点的类型,我们来查一下。找load type。好,稍等一下啊。稍等一下叫load啊,写错了load type这个。叫节点的类型load type。如果是元素节点,它就是一。如果是文本节点,它就是三。不过没有关系,咱们是有常量的。啊,或者我们就直接附这个值和这个直径判断也可以。如果你里面是等于等于三,你的load type等于等于三。我们来写一下。If。D点存在。并且price TD点。
11:02
First load type等于等于三是这意思吧。表示。表示你是一个文本节点嘛,如果是一个文本节点的时候,我是不是才做这些事情啊,剪切再放进去。现在我们再来试一下。刷新一下。点一个再点外面。是不是没问题啊,我一直在点外面啊,你看他现在就没有问题了。好,就这么一个小的细节,那么我下面想说的是,但我点进去之后,人家用户还要再选中它,然后再进行修改,那我觉得人家这个步骤有点多,挺烦的,最后我们一点击立即这个直接能选中。立即把这选上,别人就直接修改。所以input.value附上这个值之后。啊,附上这个值之后直接input select。Select,这方就表示选中它内部的文本。选中输入框。
12:02
内部。内部的文本。就是这样的。这个衣服我也加个注释。用来解决。啊,用来我们需要判断这个这个目的是什么呢。目的是?判断当前。当前price TD有直接点。而且。而且第一个子节点是文本节点。是我们节点。啊,Tax load。对应啊,对应的是三好不好。Element load对应的是一好。目的是判断当前的price TD,它有子节点,而且第一个子节点是文本节点,我们才进行这个操作。就是这样的。所以现在我来刷新一下,我一点进去看有没有选中点,它是不是自动就选中了,就这样子。
13:00
所以呢,我们用户就比较方便了,他直接修改嘛,改成六。下面我要做的是我在其他地方点一下。我在其他地方点一下,点完之后,他把这个六再自动的恢复进去。然后后面这个小G有变化。然后这个总计有变化。我们把这件事情把它做一做。那么我在这边改一个值,改成七。然后呢,我在其他上点一下,表示这个文本框失去焦点。表示当前的五亩框失去焦点好。失去焦点啊,也就是硬的对吧。设置一下。好,这边是三,我们再写个四。绑定。输入框失去焦点事件。失去焦点。更新单价。啊,更新单价。好,Input点失去焦点on blue。
14:01
On blue表示时距焦点,那我们写一下update price。啊,我们去调一下这个方法,Update price不要带小括号啊,叫update price。所以咱们现在缺这个方法,我们把它写一下CTRLC。回到这边来。Function update price。那么我们在这个方法里面,我怎么去写呢?Ifva存在,并且va.src。的存在。并且invent.sc。element.tag等于等于input表示当前事件是在这个input上面发生的吗?好,V input等于invent.sc element拿着它。拿到这个硬input的节点。然后我是不是就可以把input节点里面的外力值就取到了。VR这个叫new price,它的一个新的一个价格就把它取到了。请问一下当前这个input节点的负节点是谁?
15:03
是不是TD啊?啊,是吧,同学们是TD好,所以v price TD等于input.parent。叫parent element,这样的话我就能拿到它的负极点。那行,我拿到这个负节点之后。再来。Price td.in the text等于。六。Price。是吧,同学们这样就给它更新进去了。我们来试试看。刷新一下。这个格子咱们不应该变,我们负循环有点小问题,我现在就把它改了。这是在最初的时候,这个地方我们要减一。然后呢,这个也不要从零开始,我们应该从一开始。就表头和最后一行,第一行和最后一行,咱们就不要去遵循这样的规则了,是吧。现在就没问题了啊,第一行它没有背景色,这也点不了是吧,就这样那行试试吧,六失去焦点,诶变过来了吧九。
16:07
是不是也变过来了?十没问题,他也变过来了。下面一步我们要更新一下小计,以及更新一下总计。所以呢,我们在这边。在这个地方。当数据焦点的时候,我们执行了update price这个方法。然后在price这个方法内部。我们再来写一下update小记。想想是不是?这个叫更新当前这一行的小计。更新当前行的小G这一这这个格子。这一个格子啊的值。所以呢,我可以把这个price TD把它放进去。啊,我就把这个单元格放进去,准确的讲,准确的讲我们最好放的是T2。
17:02
放的是当前那一行嘛,不过你放TD也没关系,这个随便的啊,如果我想放T2也是可以的。直接是priced parent element是不是就是T2。TD的负元素是不是就是?是不是就是TR啊。好,根据C我把它写在这啊。和TD的负元素是T2。老师,你为什么这边调用这个方法的时候要带这个参数呢?来,下面我们来写一下。更新指定行的小记。好,Function update小鸡。那我这边写个T2。If tr存在啊,如果TR不等于空,好,我们在这边写一下。如果TR存在。咱们再补一个吧,并且T2.t。等于等于T是吧。T2.sales是不是取到所有的单元格啊?
18:00
好,我这样能取到所有单元格,VR叫TDS等于它。拿到所有的单元格之后再来。再来,我们再来看一下啊。我感觉这话筒又有问题了啊。来看一下啊,不不管了啊。拿到所有的单元格。拿到所有的单元格之后,请问一下我们的小G这一这个值啊,是不是应该等于前面这俩格子的值相乘啊?那行。VR price TD,我们先获取price TD TDS中括号是不是啊?好,我们直接获取它里面的值行吗?同学们,In the text行不行?同学们,我直接获取这个单元格的内部的值能听懂吗?再来。下面一个是不是数量啊。数量的格子,那就是com的TD等于TDS中括号2.inthetext。
19:00
没错吧,就这样的。那么我又把两者相乘。要注意了,同学们,我们inner text获取到的是字符串。我们需要把它转化成。数字。Pass it。Price TD。乘以price。抗的体力。啊,这个最好不要叫看我TB了啊,因为我们这边已经交inner text了。直接把它去掉行吧,同学们直接叫price和count啊。好,就这样子。相乘之后,我们会得到一个小G的值V2,小G等于它。然后再把这个值TDS中括号3.inthetext等于小G,是不是啊?再把它附进去。我们来试试看。把它改成六。数据焦点。是不是变成一百二了?这变成五,你看他变成100了。都变成九,你看变成一百八没问题吧,这是对的,再来更新一下总计。
20:04
当我们这边操作完之后,我们需要更新一下总计update总计。真心总计。好,就这样子。In a。Text获取到的。的值的类型是字符串类型。因此需要类型转换。才能进行数学运算,行吧,同学们啊,把它写在这。那下面咱们缺一个方法叫更新总计。回到这边来,Function更新总计。好,我们把它写一下。更新总机怎么更新呢?帮我想一想。不就是我们这个表格里面的。从第二行开始的小鸡一直累加嘛,累加的倒数第二行嘛。所以我们第一步我们先获取这个table,我们先获取了table。
21:02
Fruit t。The document get。By ID,我们先获取到float-TBL应该是这个。对的吧,T表float,稍等一下啊,CTRLC。这不能搞错了啊。是吧,根据ID获取,先获取了t po。然后呢?是不是获取到里面所有的列t Bo点入是不是获取所有行啊。获取所有行之后,我们再定一个变量,我们再定义一个变量叫sum。等于零嘛,啊,就等于零好。负循环。V2I等于零,本来我们是从零开始的,现在我们从一开始,因为第一行是表头。是吧,Roses点认减一吧,到倒数第二行。然后入子中括号I,我们取到其中的一行。渠道,其中的一行叫T2。取到这行之后,我们要取到某一行里面所有的单元格。
22:03
Sales是所有的单元格。那么。我们小G的单元格是0123,是不是所以为三啊?那行,所以我就写个中括号三,这样是不是就拿到小鸡了。好,VR小G等于pass。把他强转一下。然后我们sum等于sum加上小G,是不是这样的?最后我要去复职。Rose中国号看好了,Rose点减一。请问一下这是不是最后一行?对了吧,这就是最后一行,最后最后一行点C中括号一是不是就第二列。我们只有两列嘛。啊,这些第二列点in the text等于some。搞定。这样就把它写完了。好,我们来试一下。刷新一下。点它改成了六,你看一下呀,这点小问题,哎,这个东西咱们顺便说一下叫not a number。
23:04
怎么会出现个not number呢?这应该是我不小心犯了一个低级错误。我一眼就看到了。在这。T2点C3,我获取到的是一个小G的这个TTD的这么一个节点啊。我要获取的是这个节点内部的文本。是吧,同学们把内部的文本进行强转吧,你不能把人家这个这个TD节点强转是吧。哎,能能听懂我意思吧,啊。我把那个刚才那个错误写在这啊。我把它写在这啊。这个叫not a number。Not a number。啊,叫不是一个数字。表示你计算的结果不是一个数字,那既然不是一个数字,肯定中间一个什么什么东西,它不是数字,导致你的计算出问题了,就会出现note a number。是不是三个这个三个首字母嘛,是吧,就这样子。那行,咱们再来试一次。
24:00
刷新一下。把它改成六。哎,这样就可以了吧,把它改成八,哎,这样没问题啊,把它改成九,你看他也都是对的。所以呢,我们现在呢,我们一上来的时候window.onload。一上来的时候,其实我们就可以做一下阿的总计了。是不是同学们?阿的总计,要不然你上这个咱们那个数字是咱们999瞎写的吗。C。一上来就丢。放到这边。啊,一上来我们就调一下,现在我们再来刷新一下页面。他一上来应该就是数字应该就是对的,而不是999啊。好,这叫更新小计和更新总计。
我来说两句