JS动态操作表格

最新推荐文章于 2022-04-13 15:08:41 发布
转载 最新推荐文章于 2022-04-13 15:08:41 发布 · 148 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://yq.aliyun.com/articles/476541
文章标签：

#javascript #xhtml #ViewUI

1、web开发的项目中我们做条件查询，数据添加，附件上传等功能时候需要给予用户更多的动态选择，这样就不能将<input />框的个数写死，所以动态操作表格式一个不错的选择！


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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/jquery-1.6.2.js"></script>
<script type="text/javascript">
    function AddSignRow(){
        /*var str2=document.getElementById("trid").innerHTML;//这是通过js获取的一个tr中的所有元素
        alert(str2);*/
         var trObj="<tr >"+$("#trid").html()+"</tr>";//通过jquery获取一个tr中所有的元素，然后拼成一个tr
        var str=$("#tableid").find("tr").length;//获取table中tr总行数
        if(str==11){//假如tr长度为11，也就是说，去掉第一个tr，还有10个tr的时候，停止增长，意思是最多只能新增10个tr
            return;
        }
         $("#trid").after(trObj);//在这个<tr段落>之后插入一个HTML标记代码这是jquery外部插入，内部插入$("#tableid").append(trObj);   
    }
    function deleteRow(obj){
        var str=$("#tableid").find("tr")[1];//获取table表中的所有tr，然后取第2个，因为是0,1,2,3
        var tr=obj.parentNode.parentNode;  //获取obj代表是<a> 上一个父节点是<td> 再上就是<tr>
        if(str==tr){ //加入获取的obj的再上父节点是第二个tr 不允许删除
            return;
        }
        var tbody=tr.parentNode;   //获取tr的父节点
        tbody.removeChild(tr);   //tr的父节点(tbody)移除tr
    }
</script>
</head>
 
<body>
<div class="body_context" align="center">
    <div class="table_context">
        <table width="80%" border="1" cellspacing="0" cellpadding="0" id="tableid">
           <thead>
            <tr>
                 <th>姓名</th><th>照片</th><th>职业</th><th>操作</th>
            </tr>
           </thead>
            <tr id="trid">
               <td><input type="text" name="" value="" style="border:0px;"/></td>
               <td><input type="file" name="" value="" style="border:0px;"/></td>
               <td><input type="text" name="" value="" style="border:0px;"/></td>
               <td><a href="#" onclick="deleteRow(this)" style="text-decoration:none;">移除</a></td>
            </tr>
        </table>
    </div>
        <div style="border-bottom: 1px solid #088000;margin-bottom: 10px;margin-top:10px;width:80%;" ></div>
    <div style="padding-left:0px;padding-top:5px;"><a onclick="AddSignRow()" href="javascript:void(0)" >创建</a></div>
</div>
</body>
</html>












本文转自 小夜的传说 51CTO博客，原文链接：http://blog.51cto.com/1936625305/1428201，如需转载请自行联系原作者
动态操作表格
qq_58235030的博客
05-15 181
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } a { text-decoration:
table.js动态操作表格
04-09
用于动态操作表格~~~~~~~~~~~~~~~~~~~~~~·
js 操作表格动态添加和删除行
03-30
js 操作表格动态添加和删除行
Js动态操作表格
weixin_30617561的博客
09-25 102
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>装备</title> <meta http-equiv="...
js动态操作表格
cheng_zhi的专栏
10-22 405
一.  动态为obj表格增加一行   function addrow(obj){    var tab=document.getElementById(obj);    var rowsnumber = tab.rows.length;    var now_num=0;     if (rowsnumber&lt;=1){           //没有数据     rowsnumber = 1;...
js实现表格的动态操作
aqzengkuasheng的博客
02-16 320
1.当光标移动到表格的某一个单元格的时候，表格会变色 2.一次选中删除表格，或者一个一个删除表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 60%; /* border: 1px solid red; */ height: 300px; margin
JavaScript动态操作表格实例(添加,删除行,列及单元格)
01-21
js动态操作表格</title>[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i<6;i++){var row=document.createElement(“tr...
javascript动态操作表格
04-06
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
JS实现动态生成表格并提交表格数据向后端
10-22
在本文中，我们将探讨如何使用JavaScript（JS）动态生成表格，并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求，特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...
JS表格的动态操作完整示例
10-15
主要介绍了JS表格的动态操作,结合完整实例形式详细分析了JavaScript针对表格元素的动态修改与删除简单操作技巧,需要的朋友可以参考下
js表格操作，DOM实现数据动态增删查改
12-01
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
js 动态表格增 删 查 改
05-19
js _ 动态表格 js 动态表格增 删 查 改
JavaScript动态操作表格（添加，删除行、列及单元格）
so_much的专栏
08-17 997
js动态操作表格     function init(){       _table=document.getElementById("table");   _table.border="1px";   _table.width="800px";     for(
JavaScript实现动态查询表格
weixin_33691700的博客
03-13 334
JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE <html> <head> ...
JavaScript 动态表格操作
wgchen
04-13 5429
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
详解JS动态操作表格
诺言永远依恋小柴、、、
06-19 726
【JS】☆★之详解动态操作表格 1、web开发的项目中我们做条件查询，数据添加，附件上传等功能时候需要给予用户更多的动态选择，这样就不能将<input />框的个数写死，所以动态操作表格式一个不错的选择！ 无标题文档 function AddSignRow(){ /*var str2=document.getElementById("trid").innerH
掌握JavaScript动态操作表格行技巧
- **动态操作表格的基本元素**：理解HTML表格结构以及如何通过JavaScript操作`<table>`, `<tr>`, 和`<td>`标签。 - **DOM操作**：使用JavaScript的DOM API（例如`document.createElement`, `appendChild`, `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值