原声JS实现表格行的添加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    var tab = null;  //先定义一个空对象,准备作为表格对象使用
    var arr = [                            //定义一个二维数组作为表格内,每次添加行时候的内容输入,这是一次添加三行
                [1,‘lisi‘,10,],
                [2,‘zhangsan‘,11,],
                [3,‘wangwu‘,12,]
              ];
//    var tds = null;   //定义一个空对象,准备作为单元格对象使用
    window.onload = function(){   //页面加载完成后找到表格对象
        tab = document.getElementById(‘tab‘);
        
    }
    //用来作为追加行的方法
    function addTr(){
        for(var i = 0 ; i<arr.length;i++){   //循环这个数组  追加数组内元素有几行准备添加几行
            tab.innerHTML += `<tr data = "`+arr[i][0]+`">  
                                <td onclick = "edit(this)">`+arr[i][0]+`</td>
                                <td onclick = "edit(this)">`+arr[i][1]+`</td>
                                <td onclick = "edit(this)">`+arr[i][2]+`</td>
                                <td><button onclick="delTr(this)">删除</button></td>
                            </tr>`  //妈的,以上这是一个终极字符串拼接
        }
//        console.log(tab);
//        tds = document.getElementsByTagName("td");  //每一次追加完行,更新所有的单元格对象
//        console.log(tds);
        }
    //当点击某一个单元格的时候调用这个方法
    function edit(obj){
        obj.innerHTML = `<input type="text" onBlur="change(this)" value="`+obj.innerHTML+`">`;//给这个单元格本身添加一个可编辑的区域 并添加一个失去焦点的事件执行一个函数change(并指定这个对象本身),它的值就是这个在单元格内编辑的内容
        obj.removeAttribute(‘onClick‘);  //然后再删除onclick属性
    }
    function change(obj){   //当单元格对象内的ipt失去焦点时执行这个函数
        var tdDom = obj.parentElement;  //找到这个对象的父元素
        console.log(tdDom);
        tdDom.innerHTML = obj.value;  //单元格对象的父元素在HTML中显示的是用户输入内容(用值来获取)
        tdDom.setAttribute("onClick","edit(this)"); //并且同时获取两个属性(点击事件,编辑此区域)
    }
    function delTr(obj){   //删除这一行的方法
        obj.parentElement.parentElement.remove();  // 删除:【这个单元格(对象)本身的父元素的父元素是行】
    }
    
    
</script>
</head>

<body>
<input type="text" onBlur="change(this)">
<button onClick="addTr()">点击增加一行</button>
<table id="tab" width="80%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th width="25%">编号</th>
        <th width="25%">姓名</th>
        <th width="25%">年龄</th>
        <th width="25%">操作</th>
    </tr>
    
</table>
</body>
</html>

原文地址:https://www.cnblogs.com/wjr2018/p/10259996.html

时间: 2024-10-07 18:50:36

原声JS实现表格行的添加的相关文章

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

原声js基础笔记

原声js基础笔记 前端开发群: 欢迎加入. <!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </

原声JS瀑布流加延迟加载

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ margin: 0px; padding:0px; } .box{ position: relative; top:0px; } ul li{ list-style-type: none; posit

表格行的添加和删除

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格中的添加和删除</title> <link href="../../css/main.css" type="text/css" rel="stylesheet"/> <link

JS实战 &#183; 表格行颜色间隔显示,并在鼠标指定行上高亮显示

思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定: 前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseover(鼠标进入事件).onmouseout(鼠标移 出事件) 3.为了方便可以在遍历行对象时将每一个行对象都进行两个事件属性的制度,并通 过匿名函数完成该事件的处理: 4.高亮的原理:将鼠标进入时颜色改变,改变前先记录下原行对象的样式,在鼠标 离开时,将该样式还原: 5.改样式需要在页面加载完成后直接显示,所

JS实现表格Table动态添加删除行

1.页面内容 <table style="border:1px ; width:100%; height:160px">                <THEAD>                    <TR>                    <TH height="10px">姓名</TH>                    <TH height="10px">

js 操作表格行数的删减

沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错误的话:大神勿吐槽.勿喷) 1.首先我们来看一下效果: 就是类似这样的: 在点击删除行的时候删除行数: 在点击添加行的时候在已有的基础上依次添加行数, 2.其次,代码走起: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <hea

拖拽碰撞--原声js(自身理解上新的方法)

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div{width:100px; 8 height:100px; 9 } 10 #box{background:red; position:absolute; } 11 #box1{background:green

原声js做动画判断是否到达目标值导致的突兀问题

如题,什么意思呢? $('#box').animate({ start:200, attr:'left', step:13, alter:400 //增量 }) 这时写好的动画函数animate用法 上面起始值是200,步长13,目标值是200+400=600,那么每次我都运动13,那么他只运动到590然后再运动到603然后判断并重新赋值到600,突兀吧?先看看我是怎么判断到达终点的 if((step>0&&target<=parseInt(getStyle(element,a