添加一行删除一行-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#addline").click(function(){
            var $tr=$("<tr></tr>");
            var $td=$("<td></td>");
            for(var i=0;i<4;i++){
            $td.clone().html(i).appendTo($tr);
            }
            $("table tr:last").after($tr);
        })
        $("#removeline").click(function(){
            $("table tr:last").remove();
        })
        $("#elptyAll").click(function(){
            $("table").elpty();
        })
    })
</script>

</head>
<body>
<table border="1" width="500">
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
    </tr>
    <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
    </tr>
</table>
<input type="button" value="增加一行" id="addline"/>
<input type="button" value="删除一行" id="removeline"/>
<input type="button" value="清空" id="elptyAll" />

</body>

</html>

添加一行删除一行-js代码,布布扣,bubuko.com

时间: 2024-12-13 14:25:05

添加一行删除一行-js代码的相关文章

点击按钮添加或者删除一行实例代码

点击按钮添加或者删除一行实例代码:网站在填写表达的时候又很多的选择空间,甚至可以自行添加需要添加的内容,例如可以点击按钮添加一个表达项,如果不需要的话可以点击一个按钮删除,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

动态的添加或者删除指定元素代码实例

动态的添加或者删除指定元素代码实例:本章节介绍一段代码实例,能够动态的添加或者删除指定的元素,这里不管实际应用中此代码出现的概率有多大,只在于如何实现类似的功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /&

表格增加一行/删除一行

1,点击按钮,表格增加/删除一行,表格可编辑 HTML: <div class="handle_tab_box clearfix"> <button class="removeRow_btn" onclick="delrow()">删除</button> <button class="addRow_btn" onclick="addrow()">增加</

点击添加一行 删除一行 改变序列号

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>点击删除序号</title> </head> <body> <table> <tr> <td>1</td> <td>内容</td> <td><input type="butt

批量删除的js代码

<script type="text/javascript"> function seltAll(){ var chckBoxSign = document.getElementById("ckb");       //ckb 全选/反选的选择框id var chckBox = document.getElementsByName("chckBox");    //所有的选择框其那么都是chckBox var num = chckBo

在页面上动态添加和删除【添加信息的文本框】

页面上的内容: 当点击添加或删除会做出相应的操作 页面的html代码 1 <li id="clid"> 2 <div> 3 姓名:<input type="text" name="guestName" class="dfinput" style="width: 150px;"/> 4     国别:<input name="guestState"

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

利用jquery动态添加和删除表格的一行,并且保存单行数据

开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th&