`

JS—Table中添加、删除行

CSSHTMLJavaScript 
阅读更多

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———————————————————————

5
顶
0
踩
分享到：
| <c:forEach > 判断是否为最后一条记录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js table添加删除行

    js table添加、删除行。点“添加”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行。

    table JS 添加行和删除行

    在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义，每...

    jstable添加行删除行复制行

    在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...

    javascript对table的添加，删除行的操作

    在JavaScript中，对HTML表格（`&lt;table&gt;`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...

    JS动态添加、删除Table行排序（删除整行、删除整列）

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....

    一个动态添加table行的js例子

    在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    添加删除TABLE行

    javascript添加删除table行

    table动态添加行

    在某些交互式应用中，用户可能需要动态地添加或删除表格行，以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个...

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`（表格行）元素、`&lt;td&gt;`（表格数据单元格）元素组成。如果...

    JQuery动态添加删除table行.

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...

    常用的js动态增加（删除）table数据行的功能

    在JavaScript中，动态地添加或删除表格数据行是常见的需求，尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能，并提供相关的源码示例。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table...

    js获取table行 列 的值

    下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`&lt;table&gt;`）中的行（`&lt;tr&gt;`）和列（`&lt;td&gt;`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...

    js操作table行的上下移动，置顶置底

    当用户按下Ctrl键并点击某行时，我们可以检查该行是否已存在于数组中，如果不存在，则添加，如果存在，则删除。这样就可以实现多选功能。 `支持选中行改变样式`是通过修改行的CSS类来实现的。在JavaScript中，我们...

    table删除和添加

    本文将深入探讨`jstable`库中的“行添加”和“行删除”功能，以及如何在实际项目中运用这些功能。 ### jstable简介 `jstable` 是一个轻量级的JavaScript插件，专门用于创建具有Ajax支持的数据表格。它允许用户以...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    jquery table 添加、删除行、列 utf-8

    在创建动态数据展示时，表格（table）是常见的元素，jQuery 提供了一些方法来帮助我们方便地操作表格中的行（rows）和列（columns）。本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. ...

Magicbox
Global site tag (gtag.js) - Google Analytics