- 浏览: 800815 次
- 性别:
- 来自: 淄博
文章分类
- 全部博客 (250)
- Hibernate (29)
- FCKEditor (5)
- Jstl (6)
- JavaScript (33)
- 异常备忘 (49)
- Mysql (1)
- XP小技巧 (8)
- Java基础 (48)
- Freemarker (6)
- Birt (5)
- SQL (22)
- Spring (13)
- XHTML+CSS (7)
- Struts (5)
- ExtJs (13)
- Tomcat (7)
- JFreeChart (1)
- Json-Lib (0)
- Jquery&EasyUI (22)
- MyEclipse (4)
- Firefox (1)
- Apache Shiro (1)
- Oracle (5)
- Spring Security (2)
- SQLServer (6)
- Bootstrap (1)
- POI (2)
- SpringMVC (4)
最新评论
-
xinglianxlxl:
对我有用,谢谢
Spring 定时任务之 @Scheduled cron表达式 -
cb_2017:
...
Spring 定时任务之 @Scheduled cron表达式 -
a251628111:
谢谢分享
Spring 定时任务之 @Scheduled cron表达式 -
hl174:
确实是这个问题 不知道谁把数据库改了
java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss -
gotosuzhou:
zhangzi 写道lylshr 写道顶,大哥你真强啊晕死,这 ...
数据库是SQLServer2008,出现'limit' 附近有语法错误
js
//全局变量 var trId = 1; //添加一行 function addTr(){ var content = document.getElementById("content"); var selectId = document.getElementById("selectId"); var myform = document.getElementById("myform"); if(selectId.value == 0){ alert("请重新选择!"); return; } if(content.value == ""){ alert("内容不能为空!"); return; } //判断重复添加被选中的 项 for(var i = 0; i < myform.elements.length; i++){ //每个元素 var element = myform.elements[i]; if (element.id == "getSelectId" && element.type=="hidden"){ //被选中下拉项的值==表单中某元素的值 if(selectId.value == element.value) { //selectId.options[selectId.selectedIndex].text: 被选中下拉项的文本名称(如:测试1) alert(selectId.options[selectId.selectedIndex].text+"不能重复添加!"); return; } } } //获得表格 var tab = document.getElementById("tab"); //添加一行 //参数-1指在最下的位置添加 //但是w3school上说:若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。 //实际上为-1时并没报异常 //参数为0: 往上添加,-1或tab.rows.length(行数): 往下添加 var newTr = tab.insertRow(-1); //给此行设置id属性,便于管理(删除) trId: 上面声明的全局变量默认值 1 newTr.id = "tr_" + trId; //添加三列 var newTdName = newTr.insertCell(0); //第一列 var newTdContent = newTr.insertCell(1); //第二列 var newTdCaoZuo = newTr.insertCell(2); //第三列 //设置三列的数据 newTdName.innerHTML = selectId.value + "----" + selectId.options[selectId.selectedIndex].text + "<input id='getSelectId' name='getSelectId' type='hidden' value='"+selectId.value+"'>"; newTdContent.innerHTML = "<textarea rows='5' cols='40'name='getContent' id='getContent'>" + content.value + "</textarea>"; newTdCaoZuo.innerHTML = "<input type='button' onclick='moveTr("+trId+")' value='移除'>"; //添加后,把下面的文本域中的内容清空 content.value = ""; trId++; } //删除一行 function moveTr(getTrId){ //获得表格 var tab = document.getElementById("tab"); //根据id获得将要删除行的对象 var tr = document.getElementById("tr_" + getTrId); //取出行的索引,设置删除行的索引 //alert(getTrId+"---"+tr.rowIndex); tab.deleteRow(tr.rowIndex); } //一次性全部删除 function moveAllTr(){ var tab = document.getElementById("tab"); //该表格的行数 var rowlen = tab.rows.length; //deleteRow()方法的参数是行的索引(从0开始) //如: 表格为4行,索引以此为0,1,2,3; //以下是从下往上删除,故删除时 行数-1开始,0,1行不删除,所以rowIndex > 1 for(var rowIndex = rowlen - 1; rowIndex > 1; rowIndex--){ tab.deleteRow(rowIndex); } } //提交 function checkSubmit(){ var getContent = document.getElementById("getContent"); if(getContent != null){ //该控件不为空时 if(getContent.value == ""){ alert("内容不能为空!"); return; } } var myform = document.getElementById("myform"); myform.submit(); }
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>table.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="table.js"></script> </head> <body> <form id="myform" action="#" method="post"> <table id="tab" width="50%" align="center" border="1"> <tr> <td colspan="3"> JS添加删除行操作 <input type="button" value="全部移除" onclick="moveAllTr()"> <input type="button" value="提交" onclick="checkSubmit()"> </td> </tr> <tr align="center"> <td>被选中的名字</td> <td >输入的内容</td> <td >操作</td> </tr> <tr id="tr_901"> <td>测试</td> <td> <textarea rows="5" cols="40" id="getContent">测试内容测试内容测试内容</textarea> </td> <td><input type="button" value="移除" onclick="moveTr(901)"></td><!-- 注意这里的参数901 此参数不能以0开头 --> </tr> </table> </form> <table width="50%" align="center" border="1"> <tr> <td> <select id="selectId"> <option value="0">请选择</option> <option value="1">测试11</option> <option value="2">测试22</option> <option value="3">测试33</option> <option value="4">测试44</option> </select> <input type="button" id="btn" onclick="addTr()" value="添加"> </td> </tr> <tr> <td> <textarea rows="5" cols="40" id="content"></textarea> </td> </tr> </table> </body> </html>
——————————————————————————The End———————————————————————
发表评论
-
Java、Javascript去掉字符串全面的0
2019-03-08 10:22 558//Java 结果:1230 String str = & ... -
TypeError: n[m] is undefined
2017-11-11 11:49 721TypeError: n[m] is undefined ... -
SpringMVC提交带文件上传的form表单报错
2017-11-09 11:25 574java.lang.ClassCastException: ... -
正则表达式-三位数字
2017-08-14 17:19 1336<input type="text" ... -
js 实现两个数组(一个数组包含于另一个数组中)去重的问题
2017-07-26 15:37 927var arr1 = [ {id:1,na ... -
jquery radio选中和不选中
2016-12-09 17:14 817//选中 $("#xxx").attr ... -
Jquery DataTables 自定义布局
2016-12-08 09:29 690Jquery DataTables 自定义布局 ... -
dataTables自增序号转载地址
2016-12-07 08:11 1166"fnDrawCallback": fu ... -
easyui-datagrid 翻页数据不变
2016-06-08 10:31 699easyui-datagrid 翻页数据不变原因之一:属性s ... -
document.body is null
2015-09-10 08:55 946虽然body是JS中的DOM技术中所有浏览器支持的属性,但在 ... -
js页面跳转和js对iframe进行页面跳转、刷新
2015-07-24 14:29 974js页面跳转和js对iframe进行页面跳转、刷新 ... -
JQuery设置checkbox复选框,attr不可行,prop才是正确答案
2015-01-09 15:20 3426//判断checkbox是否被选中 if($(this). ... -
JS正则判断身份证合法化
2014-04-23 10:31 1057//这个可以验证15位和18位的身份证,并且包含生日 ... -
ajaxfileupload以JSON为返回数据类型出现的因符号无法解析的错误的解决方案
2014-01-06 16:12 1392转载地址:http://blog.csdn.net/dugu ... -
IE6 超链接的onclick事件无效的解决方法
2013-07-25 09:12 963<a style="color:#487D ... -
IFRAME中获取及改变父窗口元素(兼容FIREFOX)
2013-03-02 15:02 2943主页面ifmain.htm: <table wid ... -
使用jQuery或JavaScript 加载 css 文件
2012-12-14 16:02 1088有时我们可能会需要使用 jQuery 来加载一个外部的 c ... -
jquery load 跨域插件
2012-10-18 10:49 1441<script type="text/java ... -
JavaScript去除字符串两边空格
2012-09-26 16:06 1104去除字符串左右两端的空格,在大部分编程语言中,比如PHP、vb ... -
JS获取本日、本月、本季度、本年日期
2012-03-16 07:40 2336var now = new Date(); ...
相关推荐
js table添加、删除行。点“添加”按钮可以添加一行,每行后面都有一个删除按钮,可以删除所在行。
在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义,每...
在`jstable添加行删除行复制行.html`这个示例文件中,可以看到这些概念是如何具体实现的。通过阅读和理解代码,你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时,也可以结合CSS和jQuery等库来增强...
HTML TABLE批量添加行与删除行.javascript实现。
在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`<table>`元素及其相关...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...
在JavaScript中,对HTML表格(`<table>`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行,并实现排序功能,包括删除整行和整列。以下是对这些概念的详细解释: 1. **动态添加Table行:** 要动态添加行,我们可以使用`document....
在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先,我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...
javascript添加删除table行
在某些交互式应用中,用户可能需要动态地添加或删除表格行,以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先,我们要理解基本的`HTML`表格结构。一个...
本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`(表格行)元素、`<td>`(表格数据单元格)元素组成。如果...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...
在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table...
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格(`<table>`)中的行(`<tr>`)和列(`<td>`)的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先,让我们来分析一下给定的 HTML 代码结构: ```...
当用户按下Ctrl键并点击某行时,我们可以检查该行是否已存在于数组中,如果不存在,则添加,如果存在,则删除。这样就可以实现多选功能。 `支持选中行改变样式`是通过修改行的CSS类来实现的。在JavaScript中,我们...
本文将深入探讨`jstable`库中的“行添加”和“行删除”功能,以及如何在实际项目中运用这些功能。 ### jstable简介 `jstable` 是一个轻量级的JavaScript插件,专门用于创建具有Ajax支持的数据表格。它允许用户以...
使用javascript实现table动态增加删除行列。
在创建动态数据展示时,表格(table)是常见的元素,jQuery 提供了一些方法来帮助我们方便地操作表格中的行(rows)和列(columns)。本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. ...