Ajax添加数据与删除篇实现代码

2019-09-14 07:16:42刘景俊

(1):var tr = t.insertRow(t.rows.length);每循环一个list便为表格增加一行.因为表格的每一行显示一条数据.并返回对该行的引用.
(2):tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);为新增的行设置一个id属性.并为该属性指定一个值.注意,这里是重点.list[i].childNodes[0].firstChild.nodeValue这句的意思是要获取每条数据中id字段的值.也就是该条数据的id值.我们将这个值写给tr的id属性.以方便我们用鼠标点击了某行以后来引用这个id.
(3):tr.onclick=function(e){add_Event(e)};紧接着再为新增的行绑定一个自定义函数.函数的名称是add_Event();
(4):var td.tr.insertCell(0);为新的增添加一列.并返回对该列的引用.
(5):td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;在该列中写入第i个list的第2个子元素中的文本内容.也就是content字段里的内容了
我们把每条数据的id设定给表格中每一行的id属性.把每条数据中的content中的文本内容填写到每一行中的单元格内.至此整个数据的显示过程已完成!
 
3、add_Event(e);我们在Read函数内向表格的每一行绑定了该函数.并利用闭包技术向addEvent传递了事件对象.该函数的作用就是找出你单击的行.并获得该行数据的id:
(1):e = e || window.event;标准化事件对象.FF等浏览器利用参数传递,IE可直接使用window.event.
(2):var elem = e.target || e.srcElement; 请参阅:target或srcElement.标准化触发事件的元素.是那个元素触发了该事件.在这里的意思是说:你点击了表格中的那一行.但事实上我取到的是TD,而并非TR.这应该是传说中的事件捕获和冒泡所致.没关系我们使用tagName判断一下 如果是TD,则取该TD的父元素.这下肯定是TR了吧.呵呵.
(3):var table = elem.parentNode;取TR的父元素.就是那个tbody.并返回对tbody的引用.
(4):使用一个for循环遍历tbody中所有的行.将每行的背景颜色设置为空.
(5):elem.style.background="#999000";循环完毕以后.为你点击的这一行添加一个背景色.
(6):document.getElementById("hid_id").value = elem.id;获取网页中那个隐藏的文本框.并将你点击的这一行的id写入到文本框内.该行的id属性值.正是你选取数据的id值.而且每点击一行.这个文本框里的值都会随着你点击的行而改变.而我们在提交删除的函数里正是引用的该文本框里的值.

4、del_Data();该函数的作用:把被删除的数据的ID提交给服务端请求的网页.然后根据服务端返回的一个msg标签.来判断数据是否被成功删除.老规矩我只讲以前没有涉及过的内容:
(1):点击删除按扭启用del_Data()函数.我们先找出id为msg的span标签.然后写一段操作信息.告诉你正在删除数据.