jquery动态创建表格

效果图如下（输入姓名和密码在下方表格中显示）

代码如下

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/jquery-3.3.1.min.js"></script>
</head>
<body><div>姓名：<input type="text" class="name">密码：<input type="text" class="password"></div><button>提交</button><table border="1"><tr><td>姓名</td><td>密码</td></tr></table>
</body>
<script>$(function () {$('button').click(function () {// console.log(232)let name = $(this).siblings("div").find(".name").val()// console.log(name)let password = $(this).siblings("div").find(".password").val()$(this).siblings("div").find(".name").val('')$(this).siblings("div").find(".password").val('')var $tr = $("tr:first").clone()if(name&&password){$('table').append($tr)$('table tr:last').find('td:first').html(name)$('table tr:last').find('td:last').html(password)}})})
</script>
</html>

jquery动态创建表格相关推荐

html 动态创建表格,jquery动态创建表格
html代码 js代码 var myObj = [{ "testname": "张三1111", "sex": "男", ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
jQuery动态创建的元素无法删除？—— 事件委派找其静态父级
项目场景: 通过一个小案例学习事件委派时jQuery动态创建的元素无法移除. 问题描述案例需要动态添加表格行,点击GET可以移除此课程.但是后来动态创建的tr无法移除. var newtr = $( ...
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
JQuery动态创建Form
前言 JQuery 3.5.1 JQuery动态创建Form var form = $("<form></form>"); form.append($(&q ...
javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
在iView中动态创建表格
最近在使用iView中的表格组件时,碰到许多坑和疑惑,仔细研究了一下table组件,发现官方文档讲的不是很清楚,本文将介绍并使用table组件,做一个动态创建表格的demo,效果如下图. 一.在col ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...

jquery动态创建表格

jquery动态创建表格相关推荐

最新文章

热门文章