点击按钮创建一个表格点击按钮创建一个表格权限选择元素的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属性操作

猜你喜欢

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