104.尚硅谷_JS基础_添加删除记录-添加

接着来说我们昨天那个练习啊，新建一个这个外部项目Z15615呢，我还是把这东西给它复制过来啊，我们这个练习，然后包括这个样式表都给你粘过来。这一块改个名叫一个零一吧，这是第一个。先给它运行起来啊，看这页面，这页面呢，我们这删除功能已经做完了，点完了已经可以干嘛了，已经可以去删了，对吧，接下来呢，我们来做什么呀。添加，诶添加新员工，我在这输一些信息，诶BBCCCC我输完了一点，那个sum密呢，我应该把这什么呀，把这些信息是不是添加到这个这表格里头去啊，诶这表格里头，那我们来看这个功能我们来怎么做，还是啊，你写的时候你都不用着急，我们说磨刀不砍柴工，做任何功能的时候，你先把这功能在干嘛呀，你在心里去想一下这个功能的这个业务流程，它到底是一个什么流程啊，所以你写代码的过程就是什么呀，就是把你的这个思路，把你的思路用什么呀，用这个程序给它展现出来就行了啊，那我们来看它的一个业务流程是什么，来，我们先写上啊，写上来在这写一个叫什么呢？我看这大块啊，我们嵌错了，你点它呢，这一虚线啊，那就应该是这儿啊，起到这个window.load这个里边我们完成一什么呢，叫做一个这个添加员工的一个什么呀功能，那什么叫添加员工的功能啊，它其实功能呢，就是一句话叫什么呀，诶点击。

一按钮以后干嘛呢？诶，将我们这个员工的这个什么呀信息添加到我们这个什么呀，表格中，就这么一句话，点击按钮以后，将员工的信息添加到这个什么呀表格中，但是这一句话呢，涵盖的信息呢，确实很多的是吧，他把我们这个什么呀，整个一个业务流程都给嘛了描述了，所以接下来我们所写的代码都是干嘛呀，都是把这一句话给他具体化的啊，它具体化的那首先我们来看这功能，这功能第一步应该是干嘛我都不用看，第一步肯定是啥呀，点击按钮，我的一切操作都是从我点击按钮那一刻开始了吧，你不点按钮其他是不是都没有意义啊，所以我们这块干嘛呢？既然要点击按钮，那提交干嘛了，是不是要为我们这提交按钮绑定一个单击项函数，诶，所以为我们这个提交按钮来绑定一个这个单击响应函数，直接找到提交按钮，最后呢，是一个这个button button。

还写一个ABC，这ABC没啥用，你给它删了也行，不删也行，留着也你们留着，留着就可以啊，这块它有一个ID，叫做一个A的employee button啊来我直接CTRLC复制过来，在上边呢，我先获取这个按钮哇，一个这个EE button，然后来一个document，点一个get element版ID，这按钮是不是有了呀，然后这一个这个on click等于一个这个function，我相信这个步骤应该每个同学都能写出来，哎，知道这个思路你是有的，我这个业务是从什么时候开始的啊，从什么开始的，然后呢，我这来一个hello，我一保存，他们一刷新走你一点是不是就OK了呀，那就OK了啊注意了，它这块虽然用了三个表单项，但是我印象里它应该没有放到一个，没有放到一个表单里，这没有form标签，对吧，它都是直接写的什么呀，Input的，所以这个sum呢，它不会有提交表单的功能，因为压根就没表单啊，所以这块你就不用再取消默认行为了啊，不用取消默认。

对了，如果什么呢？如果它是一个表单，你这还要不要忘了，还是干嘛呀，取消一下默认行为，因为不然你一点的话，他干嘛了就跑了啊就跑了这块一定要注意啊好，那这块单击响应函数绑定完了，然后呢，接下来呢，诶要点击按钮以后，将员工的信息添加到表格中，其实这里边落了一步，我我现在我能直接添加吗？我得先获取到吧，所以我在添加之前，我先得干嘛呀，先得获取我们这个用户填写的这个员工信息吧，哪个信息，那在我这儿就这三个AAABBBCC是不是这三个东西啊，这东西咋获取啊咋获取啊，那我们就要先看看我这AAA b BB cccc是写在哪了，AA是写哪了呀？是写到我第一个文本框里边了，Bbb是第二个，CCCC是不是第三个呀，诶，那我们来看看我们这个文本框啊来。

一共三个文问框，一个是我们这什么呀，Name啊，Emp name employee name，员工的一个名字，一个什么呢？一个是我们这个麦啊，还有一个是我们这个salary salary，我们这个什么呀，工资啊，工资薪水，那现在呢，我们先获取第一个吧，那假设我先获取谁呢？获取我这个name name幕是写到哪个文块里的？你这要不知道干嘛呢，你给点一下看一眼就完事了，选中它一看。

是EP name这个文本块里啊，诶是写到这个里边了，所以你想获取的是什么呀，获取的是它这里边的这个内容吧，那我们说了，你要想获取它里边内容，你是不是先获取到它的这个对象啊，哎，对象怎么获取的，它是不是有一个ID啊，叫做一个EP name来我们这来获取一下，在这儿直接先来干嘛呢？获取我们这个什么呢？获取我们这个员工的名字啊，Name直接挂一个name等于什么呢？诶等于一个叫做document，点一个GET100ID是不是一个em name呀，现在这个东西是什么，这个name是什么，是不是那个对象啊，哎，对象，所以你这儿呢，1ALERT一个这个name，这个name应该是一个什么呢？是一个这个in put来一个这个name，但是我们要不要input呢？我们先看看是不是啊，我这一保存一点走，你HTML input element是。

一个，诶文本框这么一个元素，但是我要不要它对象，我要的是里边这字啊，诶字怎么获取啊，哎，点什么呀？哎点Y6，我们说了文本框里边的内容就是我们这个文本框的一个Y6属性吧，哎，所以你这应该是什么呀，点一个Y6啊这回一保存，你再看这个name是谁啊，再来看一刷新，再一点走，你是不是就AA了，诶当然你这换一个换一个什么呀，哎222或这一保存是不是就是R2了，哎你随便换一个，换一个PPT，就是说你输什么，它获取到的是不是就是什么呀？哎，所以注意啊，是点Y6啊点Y，然后呢，接下来我们再看name这块整完了，那下边这些什么email啊，Salary啊，它有区别吗？没有区别了吧，来接下来我们来直接写获取什么呢？获取我们这个员工的这个什么呀，Email和这个salla叫做一个salary。

啊，非得直接挖一个这个，咱们直接复制一下CTRLCCTRLVCTRLV，诶获取到了，当然这里边注意我们要改一下这个变量名，还有这个什么呀，哎，其实你只需要改一个ID是不是就OK了呀，哎，变量名还有我们这个ID啊这来一个现在email salary我们是不是都有了？来为了确定一下，我们来给它输出name，加上一个这个逗号，我再加上一个这个email，再加上一个逗号，加上一个S，我来干嘛呢？我来将这个信息给它输出一下，顺序是什么呀？诶按照从上到大顺序啊，Name email sal，现在来看我这一刷新来一个AA，哎，获取AA abbccc是不是都有了呀？哎，都有了啊好，现在这三个信息我就获取到了，好，那员工的信息已经有了，内幕都齐了，那接下来呢，加吗？哎，还不能加，为啥呀，你这玩意加。

需要往表格里添加什么呀？是不是添加到一个TR啊，你要想把信息添加到表格里，你还需要干嘛，还需要将你获得这个信息是不是要保存到一个TR里啊，诶保存哪个TR里呢？需要是这样一个结构，我给粘过来，是不是需要是这么一个结构啊，哎，那所以干嘛呢？我们需要需要将我们这个获取到的这个信息干嘛呢？保存到我们这个什么呀，填二中，那这这样怎么办呀？哎，我是不是一个一个去创建呀，哎一个一个去创建那这一块啊，我先采取一个比较麻烦的一个方式啊，咱们一点点创建啊，先采取一个比较麻烦的方式，虽然有点麻烦的，但是对我们理解do的哎，它有一点帮助啊，有点帮助，首先我们来看这整个一个结构，最外层是个谁呀？TR，诶最远层是个TR，那我们先来干嘛呢？先来创建一个TR，直接挖一个这个TR，等于一个document点一个这个什么呀，Korea。

配置一个艾来一个TR，这不候就有了一个TR了，哎，TR有了，那接下来呢，TR有了，我有几个TD啊，是不是四个TD啊，哎，所以接下来我们来干嘛呢？来创建我们四个TD，直接把一个第一个是我们这个name TD啊起个名叫做一个什么呢？Document，点一个create一个element，我们这叫什么呢？叫做TD，我要创建几个，哎，四个2344个TD，第二个TD是我们这个，哎，Ma email TD，这是第三个是我们这个salal salary TD，最后一个呢，是放什么呢？放超链接的吧，哎，放超链接的，所以这来一个什么呢？At TD啊at TD放超链接那个TD，现在有了四个TD了，四个TD有了，然后呢。是不是还有一个A呢？诶还有个A呢，我们把这超链接呢，也给创建出来，来创建一个这个什么呀，诶A元，我们这个超链接直接挖一个A等于什么呢？Document点一个create一个element来一个这个AA是不是也有了呀？哎，A有了，然后还有什么呀？哎我这Tom呀，Tom这邮件呀，这5000呀，这比例，它是不是都是文本呀，哎文本所以咱们联干嘛呢？我来再创建我们这什么呀，文本节点啊创建文本节点咱们是从外往里是不是依次创建的，哎，从外往里啊文本节点第一个是我们这个Tom直接来一个Y一个这个什么呢？Name叫做一个TXT等于什么呢？Document点一个create一个text node，这里边需要传的是我那个文本内容吧，传谁呀？是不是刚才我获取到这个呀，哎，直接来一个这个name，然后往下直接复制了啊，下边来什么呢？来一个这个email text，这里边传的是。

什么呢？Email，然后呢，这个是我们这个salary sal salary text，这里边传的是我们这个salary，诶salary这三个都齐了呀，但是不要忘了还有一个谁呢？Delete delete其实就好整，它是死的，它是死的直接一写就行了，直接来一个哇，一个这个Del，一个text，但是注意啊，这是一个最麻烦一招了啊，最麻烦一招了，待会我们就写完再去尝试去改变一个方式啊，来一个这个create，一个这个哎，Text node直接来什么呀，Delete，好，现在文本间是不是都创建完了呀？哎，好，那现在干嘛呢？这里边每一个节点我们都给它抗建完了，但是有个问题，现在他们都是什么呀，是不是都是散着的呀，这就像什么呀，像搭积木一样，我们现在已经把积木的每一部分都已经凑齐了，唯一需要干嘛了，是不是给它拼到一起了，哎，给它搭到一起了，那这块我们来吧，先来干嘛呢？哎，先来这个事儿吧，我们来先。

哎，像我们这个什么，将我们这个文本添加到我们这什么呀？是不是TD中啊，哎，TD中直接来一个什么呢？来一个name TD点一个aend child，一个name text，嗯，然后呢，我们这是一个email TD点一个aend child email text，再来一个什么呢？我们这个salary TD点一个aend child salary text，诶，是不是都像我们这个元素里边去添加了一个文本子节点啊，哎，文本子集点啊，TD就有了，然后还有一个什么呢？我A里边是不是还有一个delete呢？哎，A还有一个delete呢，所以这边干嘛呢？像我们这个A中添加我们这个，诶，Woman直接来一个A，点一个aend的child，然后什么呀，一个dl text，然后干嘛呢？然后将我们这个A添加到我们这什么呀，是不T？

啊，直接来一个at TD，点一个这个a pen的一个呃，提示大写的是吧，和pen的一个child来一个这个A是不是给它加进去啊，啊给它加进去啊，好，那现在这几个TD我们都整完了，然后呢？然后干嘛了？是不是将我们这个TD添加到我们这个TR中啊，直接来一个TR，点一个这个aend的这个child的，注意顺序啊，第一个是我们这个name TD直接复制了啊，第二个是我们这个麦TD，第三个是我们这个salary TD，第四个是我们这个atd，好，那现在我们这块所有的TD是不是都添加完了？好，那整个这个TR实际上我们干嘛了，是不是已经。

创建好了呀，那接下来的工作呢，TR已经创建好了，也就说这个结构我们是不是已经有了呀，那接下来呢，我是要把这个TR要添加到我们这个table中啊，哎，Table中，所以这里边我先来干嘛呢？先来获取哎，获取我们这个table，获取table来看看table跟哪呢？Table有诶好了，它又有什么呀，有个ID吧，叫做一个employee table，直接来一个哇一个这个employee table等于一个do的点一个get里的板ID employee table table是不是有了呀，然后呢，我要将什么呢？将我们这个TR诶添加到我们这什么呀，Table中，直接来一个employee table，点一个a pen的一个child来一个什么呀，撇，这不就完事了，哎，当然注意了，有没有啥问题啊，有没有啥问题，咱们先看看行不行，待会去考虑问题的事啊，我这一保存，咱们一刷新，咱们来看效果，现在哎，写了这么多了，是吧，们来看看啊，测试一下，我一。

点submit来走你诶。是不是进去了，诶确实行了是吧，诶我再点一个走你走你走你诶是不是都过去了，诶那哪有问题，这李他这个什么黑不拉几的是吧？哎黑不拉几的，不黑不拉几的他不是超链接吗？选中看看。

是超链接吧，为什么没变蓝色呀？诶它里边是不是没有写那个HHRA属性啊，咱们再看一下啊，是不是没有写HRA属性了，所以它是什么呀，黑色的，咱所以的话呢，你如果给它添加一个HRA，它是不是就变成这个蓝色的了，诶那需要什么呀？咱们A的创建A的时候落了一个事儿，我是不是应该往A里边添加一个。属性啊，哎，那这块呢，怎么加呀？诶像我们这个A中干嘛呢？添加HRI属性，这怎么加呀，直接a.HRI是不是等于就行了呀？哎添加属性直接写就完了啊，直接来一个javascript冒号，一个分号一保存是不是就OK了呀？好，我们再看一刷新走你是不就OK了，哎，就OK了啊但是这里边呢，我们还是先来看一个问题啊，这东西都是不关键的，我们先看一个关键的问题啊来我这一点开看我们这块看我们这个内存结构啊，一点开这儿，我一看什么呢？诶你发现什么了，我这table里边还有一个谁T包，但是我这边有没有T顶。

表格里边是没有T璃，诶那这璃哪来的呀？是不是浏览器自己给我加上的，诶浏览器自己给我们加上的，这加上其实也不碍事，但是你注意了，我这些TR实际上是在哪里边，是不是在T里边的？哎，在T里边的，但是你注意了，我在添加TR的时候，我是把T往哪加了，是不是添加到贴里边了，诶所以你会发现一个问题，什么问题呢？来，我这一添加走，你咱们添加这个TR在哪呢？是不是在tbo外边呢呀？诶你这一添加走，你是不是都在t body外边的呀？诶你一看t body里边呢？诶是不是这堆呀，原有的，而我们所添加这堆在t body的这个外边，那你放在这儿呢？显示上没有任何区别，是不是都是可以正常显示的呀？但是问题来了，那现在我们说了，我下边这两个TD和上边这TD他们一不一样，他们是不是兄弟，不是兄弟吧，哎，不是兄弟，他和t body是同级的，那这块会有一个隐患，问题虽然不大，但是会有隐患，当我们设置样的时候。

测试的时候，如果上边是通过T包里设置的，下边这个样式是不是就没有了呀？哎，会有一个隐患啊，会有一个隐患，所以这块呢，最好我们还是干嘛呀，给它放到什么呀？是不是提包的里边啊，哎，提包的里边，那这里边我们就需要干嘛了，我是不是要获取提包的量，那完完了，这我这是不是也没有提包点，那怎么办呀？哎，但是内存里边是不是有啊，所以你可以放心的去获取，获取什么呢？获取我们这个employee table中的什么呢？还这个直接来一个，那怎么获取它里边的你们你们table，我感觉应该first child就能获取到是吧，因为它应该就那一个词点是吧，但是我们为了保险一点怎么办呢？直接来一个get x100tIgEr，那我是不是根据比如body啊得到一个tbo，我不是根据标签名去获取它的这个后代元素S，但是注意了，它返回的是一个数组吧，所以你要给它加一个。

啊索引零啊索引零，然后我们这来一个直接挖一个这个t body锁定它，那你这儿呢，就不要往table里添加了，往什么呀？诶T包子里添加这块一保存咱们来看效果，一刷新咱们一添加，咱们还是啊先看一下结构，现在呢，是不是都在这个T包里呢？来我这一点添加走，你完了我们添加这个数也来T包，诶这样的话关系就更清晰啊，更正确了啊所以这块注意我们要往T包子里添加，而尽量不要往这个table里加啊table里好，那这加完了，我们来看这功能是不是就就完成了呀。还有没有什么需要做的呀，删除一点走你确定走你确定都好使啊，但是注意了，我试的都是以前的吧，还有什么呀，下边这几个是不是都是我新加的呀，新加的好不好使，我们来试试一点走你走你走你走你走你是不是压根一点反应也没有吧？诶为啥没反应啊，我在最上边的时候我不是已经。

我这我这个单机向应函数什么时候绑定的。是不是一上来就绑定了呀，页面一加载他们是不就绑定好了呀，但是注意了，也就说什么时候我这一刷新页面加载完了，单机项是绑定好了呀，但注意了，那我们说了，这哥们什么时候来的呀，他是后来的吧，他来的时候我这是不是早绑定好了呀，所以他还有没有了，没有吧，但是没有也不行啊，那怎么办呢。

怎么办？我是不是在单独给他？绑定一次啊，诶再单独给它绑定一次，所以这块呢，我们在最后在这儿可以干嘛呢？诶来写一个在这，诶为我们那个新添加的这个A，再什么呢？诶再诶绑定一次，我们这个单击想要函数直接来一个A，点一个on click on click来等于的这个方，那这个方式应该跟谁一样，是不是跟这是一模一样的呀？诶我先来复制过来啊看看行不行，CTRLC。然后呢，CTRL我也给它粘过来保存，我都不看了啊，一刷新咱们这添加一个一点走你。是不是行了，来一个换一个硬户一一一点走，你是不是也行了，诶再来一个这个FF一点是不是都OK了，你一确认一确认一确认是不是就给他删了，哎就给它删了啊，但是这么写的明显有一个问题，你会发现刚才我这个代码我是不是直接给它复制过来的呀，一模一样的，而且还复制了一个函数，那既然一模一样，我能不能给它，诶给它提出来呢？诶咱们来看啊，我改一下怎么改呢。

把这个东西啊，直接给它CTRLX给它放哪呢？放到我们这个外边，你可以放到全局里边，也可以放到这个这里边啊，里边我就给它放全局里边，全局里边我直接改个名叫什么叫DLADLA叫什么呀？删除一个a ctrl shift LA格式化一下，这里边我们来说一下它的作用是干嘛呢？这是我们删除我们这个什么呀，TR的一个，这个也不叫删除A，应该叫做就角A吧，是我们这A的这个单击项函数啊，删除我们的TR的一个这个响应函数，也就是说我把这响应函数给它。提出来了，提出来以后呢，那来看这儿了，我这块呢，就。

不用这么写了。呵，刚刚已经删了是吗？好在这这块我就不用这么写了，这块直接写什么呢？写一个这个DEA不就行了呀，注意加不加括号，哎，不加括号啊，我们是要赋值什么呀，对象啊，是要对象赋值给它，而不是赋值给什么呀，反原值啊，不是赋值反值同理下边这一堆。我是不是也可以改成D了，诶来一保存，那这样写的其实跟刚才那么写实际上是一样啊，实际上是一样的一保存，咱们来看刷新添加进来，先看原来的汤姆是不是还好用啊，再看新添加的一点是不是也OK啊，那也OK啊好，那这个功能呢，我们就算是给他做完了啊，做完了但是咱们这块还是说啊，我采用了一个比较比较麻烦的一个方式叭，较麻烦的方式，待会儿你们可以再想想有没有什么能。省点事的方式啊，省点事方式来我这呢，先停一下。