点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作

点击按钮创建一个表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;height: 450px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:点击按钮在div中创建一个表格// 表格数据的数组var arr = [{"name":"传智播客","href":"http://www.baidu.com"},{"name":"百度","href":"http://www.baidu.com"},{"name":"腾讯","href":"http://www.baidu.com"},{"name":"阿里","href":"http://www.baidu.com"},{"name":"淘宝","href":"http://www.baidu.com"},{"name":"京东","href":"http://www.baidu.com"}];// 页面加载$(function(){// 点击按钮$("#btn").click(function(){// 创建表格var table = $("<table style='cursor:pointer' border='1' cellpadding='0' cellspacing='0'></table>");// 把表格加入到div中$("#dv").append(table);// 循环遍历数组,创建行for(var i=0;i<arr.length;i++){// 每个数组元素,都是对象var dt = arr[i];// 创建行,并加入到table中var tr = $("<tr></tr>");table.append(tr);// 在列中显示内容,列在行中// 创建td,并加入到行中var td1 = $("<td>"+dt.name+"</td>");// 第一列加入到tr中tr.append(td1);                var td2 = $("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");// 第二列加入到tr中tr.append(td2);// 鼠标进入到每一行的时候,该行有高亮显示的效果tr.mouseenter(function(){ // 鼠标进入$(this).css("backgroundColor","green");}).mouseleave(function(){ //鼠标离开$(this).css("backgroundColor","");});}});});</script>
</head>
<body>
<input type="button" value="创建一个表格" id="btn">
<div id="dv"></div></body>
</html>

点击按钮创建一个表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;height: 450px;border: 1px solid red;}</style><script src="jquery-1.12.1.js"></script><script>// 案例:点击按钮在div中创建一个表格// 表格数据的数组var arr = [{"name":"传智播客","href":"http://www.baidu.com"},{"name":"百度","href":"http://www.baidu.com"},{"name":"腾讯","href":"http://www.baidu.com"},{"name":"阿里","href":"http://www.baidu.com"},{"name":"淘宝","href":"http://www.baidu.com"},{"name":"京东","href":"http://www.baidu.com"}];// 页面加载$(function(){// 点击按钮创建表格$("#btn").click(function(){// 创建表格var table = $("<table style='cursor:pointer' border='1' cellpadding='0' cellspacing='0'></table>");// 把表格加入到div中$("#dv").append(table);// 循环遍历数组,创建行for(var i=0;i<arr.length;i++){// 每个数组元素,都是对象var dt = arr[i];// 创建行,并加入到table中var tr = $("<tr></tr>");table.append(tr);// 在列中显示内容,列在行中// 创建td,并加入到行中var td1 = $("<td>"+dt.name+"</td>");// 第一列加入到tr中tr.append(td1);                var td2 = $("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");// 第二列加入到tr中tr.append(td2);// 鼠标进入到每一行的时候,该行有高亮显示的效果tr.mouseenter(function(){ // 鼠标进入$(this).css("backgroundColor","green");}).mouseleave(function(){ //鼠标离开$(this).css("backgroundColor","");});}});// 点击按钮移除表格$("#btn2").click(function(){// 当前这个按钮的下一个兄弟元素,清空里面的子元素// $(this).next().empty();// $("#dv").empty();// 所有的div中的第一个div$("#dv").children("table").remove();});// 点击按钮,在table中添加一行$("#btn4").click(function(){// 创建一行var tr = $("<tr><td>腾讯</td><td><a href='http://www.baidu.com'>腾讯</a></td></tr>");// 把这一行加入到table中$("#dv").children("table").append(tr);});});</script>
</head>
<body>
<input type="button" value="创建一个表格" id="btn">
<input type="button" value="移除表格" id="btn2">
<input type="button" value="添加一行" id="btn4">
<div id="dv"></div></body>
</html>

权限选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 第三个按钮,把左边所有的移动到右边$("#toAllRight").click(function(){$("#se1>option").appendTo($("#se2"));});// 第四个按钮,把右边所有的移动到左边$("#toAllLeft").click(function(){$("#se2>option").appendTo($("#se1"));});// 第一个按钮,把左边选中的移动到右边$("#toRight").click(function(){$("#se1>option:selected").appendTo($("#se2"));});// 第二个按钮,把右边选中的移动到左边$("#toLeft").click(function(){$("#se2>option:selected").appendTo($("#se1"));});});</script>
</head>
<body>
<div><select multiple="multiple" id="se1"><option value="">添加</option><option value="">删除</option><option value="">修改</option><option value="">查询</option><option value="">打印</option></select>  <div><input id="toRight" type="button" value=">" /><input id="toLeft" type="button" value="<" /><input id="toAllRight" type="button" value=">>" /><input id="toAllLeft" type="button" value="<<" />    </div><select id="se2" multiple="multiple"></select>
</div></body>
</html>

元素的value属性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){$("#btn").click(function(){// 点击按钮,获取文本框的value属性和设置// console.log($("#txt").val());// $("#txt").val('今天天气一点也不好');// 点击按钮设置单选框的value属性// $("#r2").val('哦天啊');// $("#ck2").val('改了');// 获取文本域中的value值// console.log($("#tt2").val());// console.log($("#tt2").text());// 设置文本域中的文本内容----可以设置// $("#tt2").val('小苏好猥琐哦');// 推荐使用下面的方式----jQuery的写法// $("#tt2").text('好神奇哦');// 为select标签中value属性是5的这个option标签选中// 选中的意思$("#s1").val(5);});});</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<input type="text" value="今天天气真好" id="txt">
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2" id="r2">女
<input type="radio" name="sex" value="3">保密
<br>
<input type="checkbox" value="1" id="">吃饭
<input type="checkbox" value="2" id="">睡觉
<input type="checkbox" value="3" id="ck2">打豆豆
<input type="checkbox" value="4" id="">打铅球
<br>
<textarea name="tt" id="tt2" cols="30" rows="10">普天之下 莫非王土
</textarea><select id="s1"><option value="1">妲己</option><option value="2">王昭君</option><option value="3">西施</option><option value="4">貂蝉</option><option value="5">小乔</option><option value="5">武则天</option>
</select></body>
</html>

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作相关推荐

表格的边框合并为一个单一的边框
border-collapse 设置表格的边框是否被合并为一个单一的边框. separate 默认值.边框会被分开. collapse 如果可能,边框会合并为一个单一的边框. ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
layui表格点击按钮下方新增加空白行
layui表格点击按钮下方新增加空白行一.先上代码二.代码解析三.实现业务逻辑分析四.页面展示一.先上代码 html界面代码 js代码二.代码解析这只是我个人的的代码解析,想要得到更详细 ...
java表格点击添加按钮一行_JavaScript_JQuery实现动态表格点击按钮表格增加一行，功能实现：点击添加按钮，表 - phpStudy...
JQuery实现动态表格点击按钮表格增加一行功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取点击删除,自动删除这一行 JQuery中定义一个count变量 var coun ...
pyqt5+qt desiger实例教程（1）创建含有三个按钮的窗口，点击按钮2输出消息、按钮3可退出
pyqt5+qt desiger实例教程(1)创建含有三个按钮的窗口,点击按钮三可退出目标:设计一个含有三个按钮的窗口,点击按钮2弹出消息,点击按钮3退出如果是使用的anacoda那么自带qtde ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击验证码的制作...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击复制验证码的制作转载于:https://www.cnblogs.com/yaomengli/p/6927630.html
pyqt5 基础创建窗口，点击按钮，打开浏览器
创建窗口,点击按钮,打开浏览器 QWidget { border-image:url(E:/20220305/django_test1/appium/b.jpg); }QTextBrowser { b ...
使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作相关推荐

最新文章

热门文章

点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的value属性操作

点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的value属性操作相关推荐

最新文章

热门文章

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作

点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作相关推荐