对Table标签内容进行增,删,查,改

  • Post author:
  • Post category:其他


1.增加内容

  • (条件学号不能相同,序号不能相同,添加的值不能为空.)
  1. 给一个按钮添加事件.
  2. 点击该按钮获取所有的input标签
  3. 通过遍历该标签来判断input的value值不能为空.为空则不能添加数据
  4. 创建tr标签
  5. 再次遍历input并给创建的tr标签添加值.tr.innerHTML+=”<td>”+input[i].value+”</td>”
  6. 可以将Table里的tr标签的下标当值给到序号即可.
  7. 获取table里的tr标签,并对其进行判断,如果长度小于2则将创建的tr标签添加到Table里.如果大于2则进行学号判断.
  8. 遍历table的tr标签用获取的学号的input.value和每一行tr的学号那格td.innerText转换为数字进行判断,相同则在判断里添加一个变量标记并加值.并将创建的tr标签的内容清空.
  9. 判断该变量有没有值.没有则将创建的tr标签添加到Table里.

2.删除内容

  • (在每行后面添加个删除按钮,点击删除则删除该行的所有数据)
  1. 点击按钮后获取该按钮的父级tr.(event.target.parentNode.parentNode)并删除.remove();
  2. 然后重新获取Table里的所有tr标签.并将其下标当值重新赋值给每一行的序号td的innerText即可



小白思维,有更好的做法请评论区打出来。




版权声明:本文为qq_60358807原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。