原生JavaScript实现列表/表格的增删查改

HTML+CSS+JavaScript实现列表/表格的增删查改


在前端的笔试或机试过程有时会让你写一个具有增删改功能的

    列表或表格。

    1、创建一个
      无序列表

    
    	
    • 张三
    • 李四


    2、实现添加功能

    (1)加入输入框和按钮

    为了实现新增功能必须添加一个输入框和新增按钮

    (2)给按钮添加功能

    这时候实现功能我们就需要用到JavaScript了

    我们写一个函数function addlist():

    function addlist()
    	{
    	var para=document.createElement("li");//这段代码创建新的
  • 元素 var node=document.createTextNode(document.getElementsByName("name")[0].value);//如需向
  • 元素添加文本,必须首先创建文本节点。这段代码创建了一个文本节点 para.appendChild(node);//向
  • 元素追加了这个文本节点 //最后必须向一个已有的元素追加这个新元素 var element=document.getElementById("l");//这段代码找到一个已有的元素 element.appendChild(para);//这段代码向这个已有的元素追加新元素 }

  • 函数中其中的document.getElementsByName("name")[0].value意思是输入框内的值。

    整个函数的功能实现的是创建一个新的一行放入表中,内容是文本输入框中的值。


    3、添加删除功能

    接下来要实现第二个功能:删除其中一项

    (1)添加删除按钮

    为了实现删除功能,我们需要给新增的每一项后面都加上一个删除按钮。

    这时候就需要修改addlist()函数的功能了,我希望在添加的过程中就默认自动在后面添加一个删除的按钮。

    添加的做法同上,唯一需要注意的是我们在添加找节点过程中需要特定

  • 的标签,所以我们还需要使用JavaScript给每个新增的
  • 标签添加上独有的id。

    下面的setId()函数就实现了给每个新增的

  • 标签设置id的功能

    function setId(){
    			var dlall=document.getElementsByTagName('li');
    			dlall[i].id='l'+i;
    			i++;
    		}
    注:1、“i”变量需要提前声明;2、该函数名需被addlist()调用;

    (2)给删除按钮添加功能

    未完待续

    你可能感兴趣的:(JavaScript)