点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的value属性操作
生活随笔
收集整理的這篇文章主要介紹了
点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的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属性操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 添加元素的注意问题 复习 介绍 元素的创
- 下一篇： 元素的选中问题 元素选中的问题 切换复选