js中点击按钮时自动增加一行

JavaScript024

js中点击按钮时自动增加一行,第1张

1、新建一个html文件，命名为test.html。

2、在test.html文件里，创建一个button按钮，并设置其id属性为dz，用于下面获得按钮对象，实现js点击按钮事件。

3、给button绑定点击事件，当按钮被点击时，执行hs()函数。

4、在test.html文件的js标签内，定义hs（）函数，在函数内使用alert（） 方法弹出"我被点击了"的内容。

5、在js内，使用window对象中的onload事件，当网页加载完时，执行function函数。

6、在function函数内，通过getElementById()方法获得按钮对象，使用click()方法点击按钮。

7、在浏览器打开test.html文件，当打开网页时，js自动执行点击事件。

您好！很高兴为您解答：

首先给‘增加项目’按钮绑定一个点击事件；

写一个函数，增加里面 的td即可；

举个小栗子：

<style>

div{width: 300px height: 100px background: red}

</style>

<input type="button" id="btn" />

<div></div>

<script>

var btn=document.getElementById('btn')

var div=document.getElementsByTagName('div')[0]

btn.onclick=function(){

div.innerHTML+="<div></div>"

}

</script>

望采纳

用jquery写比较方便点。

答案完善了一下，代码如下。其实这样有bug，但是比较容易修改，只要完善一下function addtab() 就行。

<html>

<head>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

  <script>

    function addtab(){

     var tcount=$("#tab tr").length

     var tpl='<tr id="s'+tcount+'"><td>'+tcount+'</td><td>姓名</td><td>年龄</td><td onclick="deltab('+tcount+')">删除</td></tr>'

     $("#tab").append(tpl)

    }

    function deltab(x){

    $("#s"+x).remove()

    }

  </script>

  </head>  

<body>

  <div>

    <span onclick="addtab()">增加</span>

    <table id="tab">

      <tr>

      <td>ID</td><td>姓名</td><td>年龄</td><td>操作</td>

      </tr>

    </table>

  </div>

</body>

</html>

但是我的理解是，ID号应该是返回给后台，后台再给前台比较好。