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

这个到这个增删改，接下来呢，我们来说一个这个练习啊说个练习，诶一个小练习，也是挺有意思的一个啊这个添加删除记录这个练习先看这个做好的功能，一点开呢，是这么一个东西，这东西呢一看其实非常简单，上边是一个这什么东西表格吧，表格表格是一个什么呀，这是一个这个四行四列什么一个表格四列有什么呀，Emailary姓名，电子邮件，还有一个工资对吧？诶然后第一个是我们这个Tom，然后他这个邮件，然后他这个工资等等一系列，然后呢，后边有一个超链接叫什么呀？Delete叫什么删除是吧？诶我一点这超链接一点，诶问我真的要删除Tom的信息吗？我点取消，Tom是不是还在呀？诶我再点，我点什么呢？确定Tom是不是就没了呀，诶Tom就没了啊一点，诶真的要生成B呢，确定BM是不是就没了呀，哎，没了，然后添加我随便写点啊。

对，然后一添加重，你是不是添加一个呀，诶再添加再添加，再添加再添加，是不是可以无限去添加呀，诶给上面添加，然后一删是不是又没来了，诶再一刷新全都回来了，都回诶是这么一个效果啊，这个练习呢，不难啊，咱们来看看怎么做啊，怎么做还是啊先把我们这个东西给它粘过来啊，这个东西包括我们这个样式表粘这空白的啊，CTRLCCTRLV给它粘过来，改一个名，我们来一个这个零五这个练习，练习打开这个页面呢，我们先来给它运行起来，运行起来呢，现在这些功能呢，都没有实现的，里边我们这个任何的GI代码都还没有没有写呢，里边都是都是空的啊，都是空的，然后呢，整个这是一个table table里边是用了几个这个tr at tr里这是TH，这是TD等等，我们就不再去强调了啊，不再强调了，然后下边呢，是又一个table，但是这个table是用来干嘛的呢？用来对我们这个表格进行布局。

那啊用来对我们那什么呀，表单进行布局的，它这块采用了一个表单这个table的布局啊，把这个表单放到这个表格里的，看着能稍微的整齐一点啊整齐点我们就不再去说这个结构了叭较简单，那接下来呢，我们来实现功能，实现什么功能呢？第一个功能我们要干嘛呀，我点击删除是不是删除信息啊，诶现在我这一点走你咔跑这儿来了，删没删掉。没删掉吧，诶一点就干嘛了，就跑了是吧？诶所以我们来实现第一个功能，来这写一个，那这块我们先不管功能吧，我先把一个东西写上这样温点啊不等于一个function文function，我们来还是先来描述一下功能叫什么呢？叫做点击我们这个超链接以后叫什么呀？诶删除一个这个员工的这个信息啊，点击超链接以后要删除一个员工信息，那点击哪个超链接不是这三个给两个都行啊，那既然要点击超链接，我先干完了，诶是不是要先给我们这个每个超链接都要绑定一个单接响应盘数啊，哎，每个是不是都得绑定啊，哎每个都得绑定，那所以我先要干嘛呀，我是不是先要获取所有的超链接，哎，获取我们这个所有的这个超链接啊，获取所有的超链接，来我们来看看所有超链接，超链接跟哪儿呢？超链接是不是跟跟这儿呢？诶就这一种，它也没什么标识，就是什么呀，就。

一个标签名，那所以我要获取它的职业什么呀？直接get elements by tag name是不是行了呀？哎，Get element摆tag name，所以我直接来一个外一个咱们这么写吧，哦，A所有的A等于什么呢？等一个document的点一个get element白拍一个name，来一个A，那这块是不是就我这个所有的A啊哎，所有的A，所有的A有了，那接下来呢，我要为什么呀，我要为每个每个这个诶超链接都绑定一个这个单接响应函数吧，每一个都绑定，那我这需要干嘛了，是不是遍利啊Y一个I等于零，然后I小于这个，还有OA点一个这个lengths，然后来一个I加加A加加，我们直接来一个OA所有的A，然后来什么呢？I点一个on cliff等于一个这个function，诶等于function，然后呢，我这直接来一个alert一个这个哈，那现在我们说了，我是不是给每一个A都绑定好了一个单降函数。

咱们来看效果啊，我这一刷新一点走，你是不是就出来了，哎，就出来了，一确定走你。诶。一点确定，哎呦，我跑了是吧，他不能跑，我们这删应该什么效果，我一删它是不是还一确定是不是还在这面啊，我点取消是不是也还在这面啊，他干嘛呢？他说不能跑啊，他说咱们这一点咔是不是就就跑了呀，那这玩意儿怎么办呀。这样怎么办呢？诶那我们先说它为什么会跑啊，诶为什么会跑呢？我们来说一下我们叫什么呢？点击超链接以后，我们说超链接会什么呢？呃，会跳转什么呀，会跳转页面这个是什么呢？这个是我们这个超链接的这什么呀，默认行为，什么叫默认行为啊，它默认是不是就跳转啊，它是超链接，超链接必须得跳，那不跳那就不是超链接了，对吧？超链接是必须得跳的，所以它默认就是会干嘛，就是会跳出来，但是现在我们希不希望跳，不希望跳，那但是呢，呃此时我们诶不希望出现什么呢？出现这个默认行为，那我们需要干嘛呀，我们是不是需要取消这个默认行为呀，那我们取消呢，我们可以通过在我们这个什么呀，响应函数的这个最后干嘛呢？二一提return一个false来取消我们这个默认行为，换句话说响应函数是不这呢。

直接在最后re条return一个什么呀，False，诶这什么意思呀，告诉你啊，你这个默认行为呀，不用了，直接干嘛呀，你就不要什么也不干了啊，什么也不干，我这一保存，咱们这一再看一刷新这一点还跑不跑了，是不是就不跑了，哎就不跑了啊，所以注意在最后来一个这个return for可以用来干嘛呢？取消它的这个默认行为啊return for这么写可以或者呢，这么写就行，不写它了，直接来什么呢？Java诶还记得我们说那个吗？Javascript的冒号分号，你写个它我把这住了一保存他们也刷新走你。

是不是也好用啊，诶也好用啊，使这个作为战略符呢，也可以啊，也可以两种方式，哪个都行，那这块我们还是return先给它写上，确保万无一失啊需保万有一失，好，那这写完了，那接下来你就给我点，给我弹出1HELLO是没用是吧，我这不想弹hello，咱把这hello给它去了，不弹hello呢，现在就是点完了以后干嘛呀，我啥用也没有啊，那点完了以后干嘛呀，我说要删除这一行啊哎，点完这个超链接我要删除这一行，那我们说删除哪行啊，是不是删除我当前超链接所在的那一行啊，哎，所在那一行，所以这里边我们来说什么功能呢？叫什么呢？在这来说一下啊叫做什么呢？点击超链接以后需要干嘛呢？呃，需要删除我们这个超链接所在的那行啊，所在那行，那什么意思呀，我点击第一个超链接删除。

第一行点击第二条链接删除第二行点击第三条链接，删除第三行，以此类推，对吧，点哪个就删哪行，那那我们首先要搞清楚谁呀，对我点的是哪个吧，你点的是谁，我哪知道你点的是谁呀。点的是谁呀？诶，那我们来看我这想函数我是给谁绑定的呀，是不是给A绑定的呀？诶既然如果是我点的第一个A，我这函数是不是触发第一个A项函数啊，第二个A触发的第二函数啊，第三个A触发第第二个这个第三个A的对吧？诶是以此类推啊，第一个是触发第一个的，第二个触发第二个，那我们来说，那既然是给A绑定的，那我这个想函数里边是不是有一个东西叫什么呀？

要再死呀。对吧，那这个Z是谁呀。那是不是就是那A呀，我这有3A的哪个呀，点哪个是不是就是哪个呀，哎，点哪个就是哪个，我们说了响应函数里边这个Z就是什么呀，就是你绑定那个事件那个元素吧，给谁绑定是不是Z就是谁呀，所以这个Z谁呢？我点哪个A，这个Z就是谁，我们来看看是不是啊，我直接来一个alert alert一个这个this，咱们来看效果，我这一保存，咱们来刷新点第一个，诶一出来是不是扎vascript冒号分号啊注意它直接弹出来它那个HF属性了，因为我第一个A的HF是不是这个刚死个号分号啊，第二个应该是ID等于002这个吧，我们来看看是不是啊，直接一点走，你是不是ID等于002啊，那第三个是不是ID等于003呀，哎，1400是不是就获取到了呀，所以注意我点哪个A，这次它就是谁点谁Z次就是谁啊，所以这边我们来说这里Z次是谁呢？这里我们点谁。

点击哪个超链接这次呢？啊就是谁啊，就是谁，那这次也就有了现在这个这次谁啊，就是我这个超链接，我如果点第一个这次是不是就是他呀，点第二个这次是不是他呀，点第三个这次就是他，对吧？诶那现在我要干嘛呀，我是我要删除谁，如果我点第一个A，我要删除什么呀？是不是第一个TR，这个TR啊，我要点这个A，我是要删除这个TR啊，我点最后这个A是不是删除最后这个TR啊所以注意我删的是谁，是TR，诶那现在我有谁呀？我有A吧，我没有TR，那怎么办呀？哎，我能不能通过A获取到TR啊，诶那我要看A和TR之间的一个关系，AA。

Ttr什么关系啊？TR是A的这个爷爷是吧？但是问题来了，我们也没有获取爷爷这么一方法是吧？那再往我看，爷爷就是什么呀？是不是就是父亲的父亲呀？哎，那我能不能获取A的父极点呀，是不是就TD啊？哎，我再获取TD的负元素是不是就是TR啊？哎，所以我就来一个什么呢？直接来一个，我们要删除这个TR，直接挖一个这个TR等于什么呢？z.printt parent note，再点parent note，这是谁呀？哎，就是我们A的父亲的父亲是不是就是TR啊？哎，就是TR啊来这来干嘛呢？获取我们这个当前的什么呀？TR啊，获取当前TRTR有了，那接下来呢，是不是删除啊？哎，删除我们这个TR怎么删呀？TR点一个parent node点一个什么呀，Remove child吧，还记得吗？哎。

来一个题，先获取他的副据点，然后再干嘛干嘛呀，把他给删了，让他自杀呀，让他自杀啊，一保存咱们来看，一刷新走你。诶是不是就没了，再来走，你没了，再来走你就没了，哪家你刷新呢，它就回来了啊，你们都是在内存里删的啊，这一删走走走是不是很过瘾啊，诶很过瘾啊，我很喜欢这种感觉是吧，但是有问你了，你喜欢是你喜欢，但是这好不好啊，你可能有这么一人是吧，你的用户，你的用户可能这个有点这个手爱抖是吧，可能帕金森啥的是吧，可能往这一挪，小手一抖，咔把Tom给删了，这汤姆是我们公司重要的员工，你这给我一删了，我这找不回来了，对，刷新一下回来是吧？哎，但是咱们说的这块，咱们现在刷新回来，你要真正做功能的话，一删肯定就给人删了是吧，那肯定给删了，那这块一咔一删完了，你这怎么办呀，这是不是很容易发生误操作呀，哎，误操作，所以删之前我们应该干嘛呀，是不是弹出一提示框来呀，哎，弹出一提示框来，所以在这呢。

我们来在这删除之前，删除之前我们弹出一个这个提示，提示框来什么呢？来一个A，它德是来什么呢？诶确认确认删除吗？确认删除吗？然后来个问号，咱们来看效果啊，我这一保存，咱们这一刷新，我一点走你诶弹出提示牌来了，确看什么不确认完了，这更惨是吧？哎，这更惨我不确认啥跟你说我不确认你跟他说也没用是吧，人家没得选，只有一个什么呀，只有一个确认你点他。是不是删了呀，那你说不行，我这摁个E，我试试ec走，你是不是也删了呀，那这种玩意更生气是吧，你还不让他直接删了呢，直接删了他赖他自己手手手欠是吧，这还得赖你什么玩意儿是吧？什么玩意儿乐他肯定不行，就一确定上钮，那我需要一个什么呀，你有一个确认或者有一个什么呀，取消我想删我点确认，我不想删，我是不是点取消啊，哎，Aler它就不行了，Aler它不行，那用谁呢。

其他的也不知道吧，那怎么办呀，我是不得找一下啊，查一下去哪查呀，乐乐是谁的方法呀，Window的吧？诶全局的是我们这个window的方法，所以我们来看看window里边除了aler还给没给我们提供别的，直接往上找，往上找直接找我们这个do参考这是不是有一个window对象啊，诶直接点开window，我们来看往下找方法啊找方法乐T是不是跟这呢呀，诶还有我们之前用过那个这个P是不是也跟这的呀，我们看看有没有其他的，这有一个叫什么呀，看看叫什么呀，显示带有一段消息以及确认按钮和取消按钮对话框吧。诶所以干嘛呢？我们可以用谁呀，Confirm啊，Confirm确认这么一个东西啊确认块直接我这就不用alert了，直接换成什么呢？换成这个comfort for，其他用法呢，都一样啊，其他用法都一样。

Confirm，诶用于弹出一个带有我们这个叫什么呀？诶确认诶和这个取消按钮的一个什么呀？诶提示提示框它需要什么呢？呃，需要一个这个字符串作为什么呢？作为参数啊需要一个字符串作为参数，该字符串将会什么呢？作为我们这个提示。将会作为我们这个提示文字干嘛呢？显示在，诶显示出来啊，显示出来保存，那现在要干嘛了，我来了一个什么呀，Confirm吧，诶confirm就不用我了啊，千万不用我了，我这一保存，我这一点走你，诶问你确认删除吗？这是不是就能选了呀，有确定有取消，我一点确定哈，是不是上了呀，哎来我再刷新比例，他点取消走你，哎呀妈呀都闷子了是吧，怎么又给删了呀，这更生气了是吧？哎更生气了，这是为啥呀？注意了，现在问你我这两个代码他有没有关系，没有关系吧，他俩没有因果关系，现在什么呀，32行执行完了以后，我三十五行是不是一定执行啊，哎，没有因果关系，他俩他的执行与否跟他一点关系也没有，所以这块我们来说，我什么时候三十五行来执行，如果用户点的是确定我是不是。

不行啊，点取消我还执行吗？不执行，但是问题来了，用户点的是确认还是取消，我不知道啊，浏览器知道，那我想想那这东西点确认和取消，这应该是什么呀？这是不是应该是这个函数的运行的一个结果呀，诶那我们想想他会不会给我们返回一个一个玩意儿呢？我们直接来看看啊，挂上一个随便写个flag，你看直接来什么呢？Alert一个这个flag，哎，我这是不是看了我们这个confirm这个返约值啊，诶我这保存咱们来看一刷新比delete确定。

处，诶我点确定的时候返回的是true对吧，我再点我点取消走你for，诶你会发现什么呢？诶我们这个confirm是有返回值的，我们说如果用户点击什么呀确认，诶则会什么呢？会返回我们这个处，如果什么呢？点击我们这个取消则什么呢？则返回false啊则返回false，那所以呢，那什么是删呀，是不是出的时候删呀，诶所以我这块做一个判断，如果用户点击确认，直接来一个if flag诶如果为true吧，哎如果为true我就干嘛呀，给你是不是删了呀，哎删了这块我一保存，如果为false呢，我说不理你啊，哎for我就不搭理你啊，我这一刷新这个再点我们来确认是不是上来呀，来我点一个取消，点一个取消点一个。

抵消是就没事了，但是明显这东西它有点不过瘾了，是吧，没有刚才删的那么那么痛快了啊那么痛快了，好那这块呢，删也就给他实现了，但是呢，还有一点有些地方需要注意一下啊，现在我这一点删，他问我确认删除吗？诶我这一看我这这删除谁呀。是不知道删除谁啊，我希望我删除Tom的时候，你给我提示一个确认删除Tom，我删除接的时候，你给我弹出一个确认删除接嘛，对吧，我一想这还不简单吗？来一个确认删除操刷新走你诶高科技是吧，来取消不删来点诶取消是不是不上呀，我点这个确定是不是上来呀，再一点走你妈呀。

还是Tom是吧？哎，这必然是Tom，因为你这是不是又给写死了呀？哎，那这Tom不能写死了，我们那干嘛呀，是不是动态的去获取啊，诶所以在这儿呢，我们需要获取一个东西，获取什么呢？获取要删除要删除的员工的名字吧，那我要获取的是谁呀？还是现在来看，现在我们有TR了，对吧，TR是是跟这儿呢？那假如我要删除第一个TR，我应该获取谁？或者获取这个玩意儿吧，我要删除第二个TR，是不是获取这个杰瑞呀？诶那我们来看他们什么关系，TR在这儿呢？我要获取的是这个，我要获取它，我是不是先获取这个TD啊？哎，先获取ttr已经有了，那接下来我们就要用TR获取TD，那我怎么获取他们什么关系，是父子啊？诶，那用什么获取，我先问你这个first child行不行，行。

不行，你要是这么写的，那没问题，但是你现在是不是这样的呀，First和child获取到什么呀，是不是空格啊，哎，所以first child不行，那怎么办？哎，那个first element那个玩意兼容性不好，我们说不用啊，那么办，哎，可以干嘛呀，方式很多，比如说我说一个我直接来一个TR，点一个get elements by tag name来一个TD是什么效果，是不是获取我这个TR里边的所有的TD呀，那我这么一获取是不是这四个TD都来了，但是我要几个呀？我说要第一个呀，第一个加一什么呢？加一个中号零是不是行了呀？哎，零，那现在获取的是TD，我要获取的TD里边什么呀，内容吧，再来一什么呀，点一个inner给你拿就行了呀。哎，这样我们来看是不是画一个这个name等于它，然后呢，我这就不写to，写一什么呢，写一个先拼个串。

这我来加上一个name，这一保存我们来一刷新走你烫取消这一点，接着这一点是报爸呀，诶确认就给它删了啊，确认就给它删了，这一点还是这个接着就获取到了啊，通过这种方式可以获取啊，其实呢，都差不多，你说你不用这种方式换一种行不行呢？也行，方式很多啊，比如说你来一什么呢？Y一个这个name等于一个TR，点一个children children什么呀，所有的子元素吧，哎，所有的子元素其实也就是谁呀，是不是也就是所有的TD啊，哎，所有TD你还是来一个中号，来一个零，然后点一个in m是不是也一样，诶也一样，我这一刷新效果是一样啊，所以注意我们这个方式会有很多种啊，方式很多种，选一个干嘛呢？选一个你熟悉的，或者选一个你觉得简单一些的啊，简单一些的。

好，那这个呢，是我们说的一个删除员工啊这么一个功能，代码呢并不多，把这逻辑呢，好好看看，好好的去理一下，那我们今天咱们就咱们就先说这么多吧，是吧，然后你们呀，把这个下边还有一个什么呀，添加新员工的功能，这功能呢，它不难，但是有点麻烦，需要你细心的做一下，你来看看这功能你去怎么完成啊，把这功能写完了，然后尝试去写一下这个东西啊，尝试写下这个东西，好，我们这来停一下。