00:00
接下来这个练习呢，是动态的添加和删除表格的行记录啊，我给你先看看效果。呃，是哪个呀，这个动态添加的这个啊，我先运行起来给大家看看效果。他现在有个表格，上面这个表格这是展现数据的，并且有个删除按钮，当你点击删除的时候，它会给你提示哈，点击取消可能就没事了，是吧，一旦你确定了以后，这行就会删掉啊这删除那下面这个呢是添加，你可以在里面输入你要的内容，我就随便写点内容哈，我一旦点击提交，它就把这个数据诶添加到上面这个表格里面来了。啊，虽然简单，但是这个场景呢，咱们非常常用，我们看到这个功能它怎么去实现。我先把这些都关了，我们打开那个带有空白的，好，那记住啊，带下划线的是空白的，好，那我们看看这里怎么做啊，先看看里面有啥吧，我先运行这个页面。
01:08
来，先瞅一瞅啊。这个其实很简单，上面是不是有个表格呀，很明显你看就上来，一上来就是个table，看见吗？啊，什么名称邮箱啊，薪资啊，不是上面阶段嘛，是吧，再往下就是数据啊，然后再往下看。添加新员工就是到这里吧，你发现它也是一个表格，看见吧，诶，然后是一些输入框，让你去输入的是一些输入框啊，然后这里有个提交按钮啊，其实就俩表格啊，一个展现数据呢，一个可以用来输入添加数据，现在大家是想先做添加还性的删除。三啊，添加先说了，还是听到添加吧哈，按照你们的声音来啊，谁说的快听谁的好，那咱们先做添加，那添加是不是什么样子，你想想我是不是在这里面输入一些内容，然后我点击这个按钮，它就把这些数据加到上面来，那相相当于什么？相当于我点击这个按钮的时候，上面这里是不是多一行，对吧，你你看啊，我刷新是不是这个效果多一行吧，也就是说我点击这个按钮的时候，我是不是要创建一个行标签对象往上面加，好别着急啊，那我现在。
02:23
先给它删掉，我先给这个按钮绑上答题时间，对吧，它有ID吧，有我通过ID查，别着急啊。来。他点。啊，Click别着急，我先把它写，写了就写了吧，然后我在那外面是不是写页面加长文章之后啊。那把它移进来。好，这个是给。Submit按钮绑定单击事项，在这个里面我们刚刚也说了需要干什么。
03:04
创建一个行标签，诶。标签对象添加到显示数据的表格中是吧，咱们刚就这么说的嘛，好，那创建一个含标签对象怎么做？那这个简单呢，咱们是不是到这里面来复制一个就可以创建了，我们说把这个HTML标签往这一放，它是不是就给你自动创建了，没错吧，好，那创建出来以后别着急啊。我觉得这个杠T这个东西其实没有没有必要加是吧，把它删掉啊，怎么删掉呢？诶快捷键有冲突了，CTRL加啊。哎，又又冲突了，不知道跟哪个冲突了，好像跟这个是吧，内网头冲突了，跟多讲啊，我我不标这杠T啊，来杠杠T来替换掉我都没了，哎，这个杠杆其实也没有必要了啊。
04:12
啊，我替换替换替换替换啊OK了，还有啥啊，还有一个是吧，替换啊可以了，我都替换了啊，然后呢，大家注意看一下啊，我先接收一下，这就创建了一个行标签对象嘛，没错吧。好，那么这个行标签对象要干嘛？是不是添加到显示数据那个表格中啊，显示数据列表是不是这个table啊。我给他查了放进来，我们先看看啊，就是什么呢，添加到显示数据的表格中，先看看这个效果初步能不能出来啊。跑起来啊，我一添加添加添加添有吧，好，接下来要做的事情就是什么，就是咱们是添加了，但是你这添加的数据都一样啊，咱们这些数据是不是由这里输入产生才行啊，所以你这上面就能获取这里的内容。
05:13
啊，获取这个内容还不简单吗？就这个输入框啊，咱们先得到这个输入框在操作什么，是不是它的属性就行是吧呢，来获取一下啊，第一个名称那个是ID是它employee内啊来获取一下。我在上面获取一下啊。获取输入框啊，姓名邮箱。薪资或者是工资的内容是吧，来获取一下。你。上来。创建一个能不能生成啊，不能生成算了，手写吧，Out，这样做name啊，然后呢，我再以此类推复制一下，还分别是谁跟谁呀，是不是有邮箱啊，有ID看见吗？还有salary是吧，我记下来啊。
06:15
Email salary，看见吧，Salary，好，那这个得到以后，咱们是不是替换掉这里的内容？就拿掉他呀。Lima。那上面这里呢，是不是也替换掉。Email看见吧，这个呢也替换掉。哎，好了，那现在我们看看行不行哈，刷新一下来，我随便输了啊，我也先不管格式了，来走你出上来了，哎，走你或或者说我再换换OK了啊，这是添加，呃，然后呢，接着我们来看一下这个删除啊，我删除写在上面。
07:11
在这里啊呃，删除删除怎么做，你想一想删除你是不是得找到每一行的这个A标签，你看看哈，下面你上来看看这个删除是不是有个A标签的，所以我们要给这些A标签是不是网呢？大家时间的，大家点击的时候去做一些工作吧，好，我们看看怎么做哈，在这里A标签点。Click。好，咱们说。给删除的A标签绑定单击时间。给删除的A标签绑定单机事情好，我们来看看这里面有干啥，我先乐的试试看能不能绑定成功啊。
08:01
我先试试看有没有绑定成功，好试试看吧，找你有吧，没问题，但是周一。诶。一点击确定以后，它是不是就跳了，这个时候咱们点击删除是不是不需要它跳转了，只需要他做这个删除工作就可以了，怎么样阻止它不跳呢？For。可以阻止元素的默认行为，它就不跳了，来看一下啊，走你。他是不是不跳了啊，你看阻止元素的默认行为，A标签的默认行为就是点击的跳转了，那你都阻止他就不跳为其实这个律force咱也不是第一次出现，咱前面就讲过一次，还记得在哪呢啊啊对，在提交的时候啊，Me那个事件了是吧，你有表单不合法或流行说则不不提交了吗？啊一样的哈，好，那现在这个阻止啊，咱也阻止了，那接着咱们就来看看A标签本身这个提示功能。
09:10
我们要干嘛，咱们是不是点击的时候提示用户啊，怎么提示它有个函数叫做。抗风抗风，你这翻译过来啥意思？确认提示吗？看这把。啊，就确认一下嘛，来先说明一下哈。咱们说是javascript语言提供的一个确认。提供的一个确认提示框函数啊，你给它传什么，他就提示什么，就这样子啊，我给你看一下哈，国歌是不是很帅是吧？啊，他就提这个写啥他就提示啥啊随便点有吧，有好现在大家注意看一下。
10:11
它提示的时候是不是有两个按钮啊，那么咱们点击这两个按钮是不是表示不同的答案啊，那我们怎么知道它到底是点击了确定函点的取消，因为先想想，如果用户点击了取消，我是不用删，当如果用户点了确定，我是不是得删掉啊，好，那这个时候怎么办呢？注意看哈。就是当用户点击了确定就返回出这个号码是有返回值的，你知道吗？啊，那么当用户点击了取消就返回false，哎呀什么东西来你看看吧，就你确定要删除吗？对吧。啊，啥意思啊，来你看嘛，很直观的。
11:02
来别着急啊，走我们运行一下来，你确定要删除吗？看见吧，我一取消它是不是复杂啊，再来一次，你再点你确定它是不是错了，那我们就可以根据这个返回的结果来操作了呀，对，就做个if判断了，是吧if啊。哎，是不是只有它返回处的时候咱们才删除，删除怎么做，我们就要想想啊，对刚刚同同学说了remove嘛，前面是什么，前面是不是行对象点啊对吧，问题就是到底是哪个行，我们怎么去查这个行对象，我们怎么去查这个行对象，你想想我一上来我是查to这行还是这这行还是不这行，我是不知道，对他记住啊，我们不知道应该直接查哪一卡，但是我们能知道什么，注意看。
12:03
我们说注意啊，别着急，在事件响应的方程函数中有一个diss对象，刚刚是不是讲过这个diss对象是当前正在响应事件的当对象，也就是说大家看啊，它这里有一个this。这个地址是谁，谁响应啊，我点了这个A标签，是不是他响应时间呢？这他来看一下吧。我点了以后，哎呀，有同学说，老师这个对象不应该是什么object HTML，什么element那个标签嘛，是吧，咱们稍微说明一下，A标签比较特殊，他在谈的时候是给你看地址的。他给你看第几段啊，那我们刚刚点的第一个，你看下哈，第一个是不是ID001，看见吧，第二个是ID002啊，你点第二个是ID002呀，啊，你要点第三个，第三个是ID003，你看是不是这个效果说明没错吧，就那个地址啊，那现在你说我们虽然不能够直接查到那个卡，但是我们是不知道点了哪个A标签，那么通过知道点了哪个A标签，我们找它的复元数，再找它的复元数，那我是不是就知道他要删哪一行，点到哪一行对吧？那你取两次复元数就可以了，能理解吧？来注意看哈，我们把它转成几格的对象，点取一次复元数，再取A，再取一次负元数，能能理解吧，那这不是得到行了吗？好，那等到这个行对象以后，我把它放进来，替换掉它。
13:55
好听好升了，来看看效果啊，来点击你确定删除吗？取消没事，一旦确定出成了，确定就删，OK，但是回来再看。
14:09
你看哈，它提示是提示的，但是通对通过这个提示，你看出来是点了谁了。是看不到啊，你说我都不知道点了谁，我哪知道要不要删，一般情况下你看啊，比如说我要我要山中间那个，但是我手一滑就划到上面去点了，这种可能性有吧，或者说我滑到这里来，我本来也不想删了，但是我就不小心碰了一下，单击这种常这种需求很很常见吧，是吧，不小心点了，那这个时候你应该提示用户，你到底点了谁，要删谁，你看到吗？啊，所以应该是这样子，就是你确定要删除，诶某某某妈能理解吗？这样是不是更加清晰一点啊，也就是你要把我点击的那一行的第一个TD，它的信息给我显示出来，对吧，这样才行啊对，那怎么办？我们想想我们是不是已经得到删除的那一行，那我只要查到的后端第一个TD取得的内容不就完了吗？对吧，第一个TD吗？来看看怎么做啊，我得到这个函以后，TB这1.find是查找。
15:18
后代的什么后代TD我们要的是不是第一个取它里面的文本内容，看见了吗？就就可以了呀，来name啊，然后我把这个name呢加进来。啊，不要激动啊，来咱们看一下刷新，直接看我点击第一个通，它是不是提示痛了是吧，我点击je这个也没问题是吧？点击不也没问题，这个提示呢，就很清晰了是吧？啊取消没线，一旦确定算了。就啥好，这个功能呢，看似啊已然完成，哎，不不是啊，怎么idea等有自动保存啊，不是保存的问题啊，不是保存的问题，咱们来看一下，大家注意看，现在呢，我们我们加上来，我们加上来，你看啊这个新添加的那条记录的删除，诶是不是有问题啊，诶这这删除不是做好了吗？你看啊，我原来这里有的删就没事能实现，但是我加了这一条的删除就不行，看见了吗？这为啥呀？咱嗯对我们说明一下哈，大家注意，一开始在绑定单击事件的时候，咱们是不是页面加载完成之后就马上绑定了，那个时候页面加载完成上面是不是只有三行，而且里面就只有三个A标签是吧？你看嘛，我这里查了A标签看见吗？它一共。
16:56
查到几个？
17:02
一共就查了几个，别着急，是不是三个，也就是说其实这个删除事件呢，只给他们三绑定了，对，而我们动态添加的这个行的A标签它没有打上，能理解吧。啊，我们只要给他绑上就行了，有同学说放到里面就行了，放到下面就行了，你看一下哈，我们这个A标签的代码其实已经写在添加了下面了，看见了吗。能理解吗？但它还是无效，为啥你这个函数里面的代码是不是点击了以后才执行，而我这个绑定删除的事件，它是不是一页内加载完成就已经执行了，所以没有用，能理解吗？有同就放到里面，放到里面是吧？大家来看一下，放到里面就行了，大家记住，放到里面就表示你每添加一次，它就绑定一次单击事件，而且我现在放到里面了吗？原先那些是不是又不行了，你必须要怎么样，你必须要点击添加了以后他才行，看见了吗？能理解吧，也不是这么干的，因为你不点，你想想用户一上来是不是有可能就先删，不点击添加呀，那也不行，所以你也不能先放到里面来。
18:24
注意看一下哈，别着急啊，别着急，那么其实现在的问题就是啥，现在的问题是不是你最后添加的这个A标签没有绑上啊，你给他补绑一次不就好了吗。能理解吧，哎，你每天加一条班，给你绑一次，给你绑一次，最后这个能理解吗？怎么办呢？注意看啊，我们在这个行这个地方。点find查找后代A标签，还记得方法吗？有同学有可能不记得吧，看一下来find find啊find find是干嘛的呀？
19:03
查找后代的好方法，用来查找后代，那咱们现在是干嘛呀，咱们现在是不是通过这个行对象找他的后代A标签就是这个行嘛，是吧，我找他的后代是不是A标签啊，这样就能得到了，然后在里面再绑上这个事件就可以了。啊，咱们说给添加到行到A标签榜上。事件，那我们试试看哈，就是这里面写什么呢？哎，补绑的是吧，单机世界先行不行啊，这试试看走你我现在添加一个走他是不是有啊啊有就简单了嘛，是吧，我只要把下面这些内容，他们俩做的工作是不是一样，我把这个代码给他拿过来放在这里不就好了吗？因为你上面那个删除和我这里的删除干的工作是一样的吧，所以我放在那就行了啊别着急，来我们试试看行不行啊，回来刷新一下，原来这个可以吧，没问题，那先添加这个呢。
20:15
是不是也行了，取消没事，确定就删了对吧？也可以了啊，功能上来说基本上就已经完成了啊，如果同学说老师代码太多了，那其实我们可以优化一下怎么优化，你想想下面这个单地事件的事情和上面这个单地事件的事情是不是一样对吧？一样的话我们就可以抽取成为一个函数复用，你看吗？怎么做呢？别着急啊，咱们写在上面好哇，Delete function，这是不是删除那个事件呢？我再敲一次提示，诶算了，我还得自己敲好，我说干这里干很多事情呢，就是哎，创建一个用于复用的三除的个函数，那我把这这个内容吗？你现在这个内容是不是一样啊，我把这个内容就放上来，放到这里面来，然后去复用就行，看懂了吗？
21:17
对吧，怎么复用啊，我们试一下，有同学老师直接丢进来就行了，好，那直接丢进来delete function我这么写，先尝试换一下啊，我写在这里面行吗？不行，大家记住啊，这个是不是后面补板的呀。你发现这个后面补板了，它就不行，原来那种就放射就可以走。诶，他是不是得到那个内容啊，一旦取消他刚掉了看见吗。诶，难道是因为给他把给他换不行，给下面这个换行吗？我给下面这个换试试看呢。Delete，翻来我们刷新一下。
22:04
诶，这是不是有点不行，为啥这就不行呢？我觉得啥也没干呢，我复制粘贴这个代码咋就不行了，注意看对大家注意看啊，我们这里有一个非常重要的话，一句话非常重要，在这里面这个函数里面，咱们是不是用了这个这个Dis对象，这个Dis对象是核心的啊，我们说在事件响应的反函数中有一个Dis对象，那么这个Dis对象是当前正在响应事件的动对象，它是。本次删除操作的核心元素，为什么？因为我们只有定位到得到几啊，我们是不是只有定位到这个A标签，我们才能找到TD只能找到行删除这一行，有了删除这一行我们才能删除，我们才能找到删除行的信息是吧？但是如果说地址一旦错了，那是不是就找都找不到了？
23:01
都找不到了，那老师这个地址没错呀，我这地址还是那个地址，我啥也没动啊。这个定值数没改是吧？它是什么？改了你再仔细看看这句话，再看一次啊，在事件响应的方程函数中，注意，现在回来看看这个代码，在记住那句话，在事件响应的方省函数中，这个函数是不是才是事件响应的分数函数，这个只是人在调用这个代码啊，所以这里面这个Dis才是我们要的Dis。记住啊，我们说事件响应的方式，然后这里面呢。代码调用的翻身。这是代码的方式吗？删除操作的function，来你看看这两个地址是不是一样啊，我跟你说完全不同，来我点击删除看见了吗？事件响应的是不是有连接的对吧？但是删除操作里面那个还是那个东西吗？就不是了，看见了吗？所以他们不是一个函数啊，大家记住我们这句话特别重要，就这里面它已经不是事件响应那个函数，那怎么办？把它变成事件响应那个函数不就好了吗？用它替换掉外面这个吧，好，我们想的很清楚，对吧？把它替换掉，老师没毛病，替换掉它就可以了，来我们替换掉。
24:34
我们想的，那这样就替换掉了呗，老师这不就是吗？是这样吧，好我们以为这样又可以，那其实还是不是来接着再看啊，发现还是有问题，来走刷新，哎呀，你发现一上来刷新，它是不是又开始进行那个事件了，咱们还没有点击删除吧。哎，发现了吗？啥情况。这个诶还不能用，你发现了吗？为什么大家去看那个代码，这是啥？这是函数调用啊，对吧？函数名加个括号，是不是函数调用，他把函数调用的返回值交给了这个click，能看懂这个代码吗？是这样吧，但是你这个click需要的是那个返回值吗？不是，需要的是那个函数。
25:24
这能理解吧，所以呢，这个地方你不要去调用，你把这个函数，诶看见吗。这是不是个函数啊，你稍微看看咱们上面是不是定义了一个变量，这个变量是不是等于一个函数，人家现在需要的什么，往下拉是不是需要这个函数啊，你把函数传给它就行了，不要加括号，加了括号也会有问题，这个时候这个delete方式就是事件响应的函数了，来请看这时候它是不是不掉了，因为你没有加括号，没有函数调用了，好，这个时候再点击删除，是不是删除操作里面没问题了，取消你看到有了吧，确定没问题，哎，一旦确定是不是删了，OK，这个地方复用的时候要注意啊，这个小点，那现在这个这么改，那这这里面这个呢，是不是也这么改啊，也这么改。
26:18
OK，我把这个改了叫做什么？叫delete翻，不要加括号。括号就很多都用了来，那自此呢就完了，诶上面这个复用好了没事是吧，删除没问题吧，这个。这也没问题啊，可以了哈，咱把这个提示把它干掉哈，这提示太丑了是吧，可以了，自此呢，咱们这个功能就是完成了啊。
我来说两句