点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的value属性操作
2019-01-16 17:37
429 查看
点击按钮创建一个表格
[code]<!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(){ // 鼠标进入
4000
$(this).css("backgroundColor","green");
}).mouseleave(function(){ //鼠标离开
$(this).css("backgroundColor","");
});
}
});
});
</script>
</head>
<body>
<input type="button" value="创建一个表格" id="btn">
<div id="dv"></div>
</body>
</html>
点击按钮创建一个表格
[code]<!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>
权限选择
[code]<!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属性操作
[code]<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 我创建了一个托盘图标，可以正常使用，点击右键打开菜单。问题是如果点击右键后不选择其中一个菜单项进行操作的话，它就总不消失。
- 用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格
- 一个按钮，如果5分钟内点击再次点击给予提示操作频繁，在JS里可以这样写
- jquery之操作元素属性和特性(设置特性值，attr(name,value),attr(attributes)方法的使用)
- Ext.Net 1.2.0_演示为权限控制动态创建按钮的一个解决方案-01_2
- Extjs--点击一个按钮，打开一个新的窗体window重复创建的问题
- QTP如何设置动态属性的标准检查点？ 此业务是：点击【生成验证码】按钮，会在一个文本框中生成验证码
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
- Ext.Net 1.2.0_演示为权限控制动态创建按钮的一个解决方案-02_2
- CAD中点击form上的按钮在屏幕中选择点或者其它GetXXX操作并同时Close Form的方法（getpoint close form）
- 使用selenium+python；在页面A点击一个按钮跳转到页面B，页面A没有关闭，浏览器打开了一个B，切换窗口定位页面B的元素
- 不要点击一个功能就创建一个新的网页，要尽量少的新创建页面（例如：办事指南，点击一个部门创建一个网页，选择具体事项时，又创建一个网页，这样创建的网页太多）
- C++.QT编程学习笔记——点击一个按钮后出现选择文件对话框
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性
- 总结一下jQuery操作元素节点的方法（创建、选择、插入节点）
- android 点击一个按钮，选择一张图片，获取路径，然后显示在屏幕
- ：创建一个窗体；在窗体上添加一个按钮（text设置为 选择线颜色）；向窗体添加一个颜色对话框（colorDialog1）单击按钮，能够打开一个颜色对话框，选择颜色，且更改画笔颜色
- 在页面里点击一个按钮后出来一个层,可以操作的那么一个层!
- 链表的基本操作（创建，查找指定位置元素，删除指定元素，插入,倒置，去重,求集合的差，分别交换结点与交换结点值实现的冒泡排序，将两个有序链表合并成一个有序链表）c语言实现
- 利用 SHDocVw::IShellWindowsPtr m_spSHWinds 遍历所有IE浏览器，得到里面的所有元素 还有一个是查找IE窗口里的submit按钮，模拟点击