Javascript学习笔记

1.js的声明

(1)在head标签中使用script标签进行js代码域的声明

<script type="text/javascript">
    ...
</script>

  作用:

    声明js代码域

  特点:

    js的代码只会作用于当前网页

(2)在head标签中使用script标签引入外部声明好的js文件

<script src="***.js" type="text/javascript" charset="utf-8"/>

  作用:

    引入外部声明好的js文件

  特点:

    实现js代码的重复使用,避免代码的冗余

注意:

  因为js在HTML代码中是一门单独的语言,可以声明在文档中的任意位置

  一般情况下声明在head标签中

2.js的变量

(1)js的变量声明

   js中的所有变量声明只有var关键字

<script type="text/javascript">
    var a=123;
    var a1=3.1415926;
    var a2="js";
    var a3='k';
    var a4=true;
    var a5=new Date();
</script>

  注意:

    js的变量名严格区分大小写

    js中的字符串可以使用双引号也可以使用单引号

    js中可以声明同名变量,不会报错,后面会将前面声明覆盖

(2)js中的数据类型

  数据类型判断关键字:typeof

  数据类型:

    number:数字类型

    string:字符串类型,注意,在js中字符可以使用单引号也可以使用双引号

    boolean:布尔类型

    object:对象类型

    null:空对象赋值,引用类型的数据赋值为null

    Undefined:变量声明不赋值的情况下,默认值是undefined

  注意:

    在js代码中尽可能的给声明的变量赋初始值

(3)js的变量强转

  使用Number()函数,将其他数据类型转换为数值类型,转换失败返回NaN(not a number)

  使用Boolean()函数,将其他数据类型转换为布尔类型,有值返回true,无值返回false;

(4)特殊值

  null                    object

  undefined          undefined

  NaN                   number

3.js的运算符

  算术运算符:

    加法:+

    减法:-

    乘法:*

    除法:/

    余数:%

      number类型和number类型

      number类型和boolean类型(true--1,false--0)

      number类型和string类型(*,/,%,-)

      string类型和string类型的数字(*,/,%,-)

      string类型数字和boolean类型(*,/,%,-)

    在算术运算符中如果两边的数据类型不是number,会使用Number()强转后再进行运算

    注意:

      在字符串中“+”符号代表的是字符串连接符,不参与运算

  逻辑运算符:

    & && | || !与java中一致

  关系运算符:返回值true或者false

    !=  >=  <=  >  <

  自增运算符

    ++  --  +=  -=

4.js的特殊关系运算符

  等值运算符:==

    先判断类型,类型一致则直接比较

          类型不一致,则先使用Number()进行强转后再进行比较

    注意:

      null和undefined在做==判断时返回true

var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
alter(a==a1);//true
alter(a==a2);//true
alter(a==a3);//false
alter(a1==a2);//true
alter(a1==a3);//false
alter(a2==a3);//false
alter(a4==a5);//true

  等同运算符:===

    先判断类型,类型一致再比较内容,内容也一致则返回true

          类型不一致,直接返回false

var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
alter(a===a1);//false
alter(a===a2);//false
alter(a===a3);//false
alter(a1===a2);//false
alter(a1===a3);//false
alter(a2===a3);//false
alter(a4===a5);//true

5.js的逻辑结构

  if结构

    单分支结构:

      if(判断条件){执行体}

    双分支:

      if(判断条件){执行体}else{执行体}

    多分支:

      if(判断条件){执行体}else if(判断条件){执行体}...else{执行体}

  switch选择结构

    switch(变量){

      case :break;

      case :break;

      ...

      default:break;

    }

    注意:

      判断的变量可以是number类型也可以是string类型,但是不要混用

6.js的循环结构

   for循环

    for(变量;条件;迭代条件){循环体}

  while循环

    while(循环条件){循环体}

  do{}while{}循环

    do{循环体}while(循环条件)

7.js的数组

(1)数组的声明

<script type="text/javascript">
    var arr=new Array();//声明一个空数组
    var arr=new Array(length);//声明一个指定长度的数组
    var arr=[元素];//声明数组
</script>

  注意:

    js的数组声明不用指定长度,js的数组长度时不固定的,会随着元素的数量改变而改变

(2)数组的赋值和取值

<script type="text/javascript">
    var arr[];
    arr[0]="2";
    arr[1]="abc";
    arr[2]=true;
    arr[3]=new Date();
</script>

  数组可以存储任意类型的数据

    数组名[角标] = 值;//角标可以是任意的正整数或则0

  数组的取出:

    数组名[角标]//返回当前角标对应存储的值

    如果角标不存在,返回undefined

(3)数组的length属性

  数组名.length //返回当前数组的长度

  数组名.length=新的值//动态的改变数组的长度

    如果length>原有长度,则使用空格进行填充

    如果length<原有长度,则从后面截取,最后的数据会删除

(4)数组的遍历

var arr[1,"abc",3,"a",4];
//遍历1:普通for循环
for(var i=0;i<arr.length;i++){
    alter(arr[i]);
}
//遍历2:for-in
for(var i in arr){
    alter(i);//获取的是角标
    alter(arr[i]);      
}

 8.js数组的常用操作

  数组的操作学习:

    数组的合并:arr.concat(b,c);//数组的合并

    数组指定间隔符转换字符串:var b=arr.join("-");

    数组的开始位置插入指定原属,返回新的长度:var ln=arr.unshift("lol");

    数组移除第一个元素并返回:var ele=arr.shift();

    数组的末尾插入指定原属,返回新的长度:var ln=arr.push("lol");//追加的元素可以是一个数组,但作为一个角标值存在

    数组移除最后一个元素并返回:var ele=arr.pop();

    数组反转:reverse();

    数组的排序:sort();

    数组删除指定位置元素:var arr2=arr.splice(1,3,"a");//从1位置开始往后删除3个元素

9.js的函数

  作用:功能代码块的封装,减少代码的冗余

  函数的声明

    //方式一:

      function 函数名(形参1,形参2...){函数执行体}

    //方式二:

      var 函数名=new Function("形参1","形参2"...,"函数执行体");

        注意:此声明表明在js中函数是作为对象存在的

    //方式三:

      var 函数名=new Function("形参1","形参2"...){函数执行体};

    //调用声明的函数

      test(实参1,实参2);

  函数的参数

    js中的函数在调用时,形参可以不赋值,不会报错

    js中的函数在调用时,形参赋值可以不全赋值

  函数的返回值

    在js中如果函数有返回值直接返回,没有返回值默认返回undefined

  注意:

    js的代码声明区域和执行区域是一起的,都是在js代码的代码域中

10.js的函数(二)

  函数的执行符

    在js中函数的执行符是()

      没有小括号则函数名其实就是一个变量

      加上括号则函数会被执行

  函数作为实参传递

      在js中函数可以作为实参进行传递

function testobj(a){
   a();
}
var testParam=function(){
    alert("我是函数参数");
}
testobj(testParam);
//开发中常用的传递方式
function testObj2(fn){//testobj2函数在调用时,实参必须是一个函数对象
    fn();
}

testObj2(function(){
    alert("开发");
})

 11.js中的类

  类的声明

  function 类名(形参1,形参2.....){

    this.属性名1=形参1;

    this.属性名2=形参2;

    ......

    this.属性名=fn;

  }

function Person(name,age){
    this.name=name;
    this.age=age;
    this.test=function(a){
        alert(a);
    }
}

  类的使用

  var 对象名=new 类名(实参1,实参2......);

  注意:

    js中类的内容只是对象的公共部分,每个对象还可以自定义进行扩充

var p1=new Person("张三",32);
alert(p1.name);

  类的“继承”:prototype关键字

  通过prototype关键字实现了不同对象之间的数据共享

  作用1:实现某个类的所有子对象的方法区对象的共享,节省内存

Person.prototype.test=function(){alert("哈哈")};

  作用2:

function Person(name,age){
    this.name=name;
    this.age=age;
    this.fav="唱歌";
}
function User(uname,pwd){
    this.uname=uname;
    this.pwd=pwd;
}
//使用prototype
Person.prototype=new User();
User.prototype.testU=function(){alter("我是user")};
//使用类
var p1=new Person("张三",32);
var p2=new Person("李四",23);
p1.testU();

12.js中的自定义对象

  创建自定义对象

    对象的作用:用来存储整体数据

    原因:很多时候我们没有办法预先知道一个对象应该有哪些属性,所以只有临时的创建一个对象来自定义属性存储数据,来保证数据完整性

    应用:

      Ajax使用

    使用:

      创建自定义对象

        var 对象名=new Object();

        对象名.属性名1=属性值1;

        对象名.属性名2=属性值2;

        对象名.属性名3=属性值3;

        ......

        var 对象名={}

        对象名.属性名1=属性值1;

        对象名.属性名2=属性值2;

        对象名.属性名3=属性值3;

        ......

      一般用来存储数据,不会在自定义对象中存储函数对象

      js中的对象属性和内容是可以自定义扩充的,不是依赖于类的声明的,类只是对象公共部分的一种声明,是为了节省代码冗余 

13.js的事件机制

  概念:基于监听的,一个动作会触发其他事务的执行

  作用:根据用户的行为触发响应的js函数的执行,实现网页和用户之间的互动

  使用:

    单双击事件:

      单击事件:onclick

      双击事件:ondblclick

    鼠标移动事件:

      鼠标悬停事件:onmouseover  

      鼠标移除事件:onmouseout

    键盘事件

      键盘下压事件:onkeydown

      键盘弹起事件:onkeyup

    焦点事件:

      获取焦点:onfocus

      失去焦点:onblur

    值改变事件:

      专门给select标签使用

      onchange事件    当下拉框的值改变时触发

    页面加载事件:

      专门给body标签使用

      onload        当页面加载成功后触发

  注意:

    事件是作为html标签的属性来使用

    一个html标签可以同时使用多个事件,但是注意事件之间的相互干扰

14.js的常用方法和对象

  作用:js将常用的功能封装好,调用即可,不用重复的封装

  String对象

    使用:字符串.函数名

    大小写转换:

      toUpperCase()  转换大写

      toLowerCase()  转换小写

    字符串截取:

      substr(0,1)    从指定开始位置截取指定长度字符串

      substring(0,1)    从指定为位置开始到指定位置结束的字符串(含头不含尾)

    查找字符位置

      indexOf      返回指定字符第一次出现的位置

      lastIndexOf     返回指定字符最后一次出现的位置

//创建字符串
var str="abcdefg";
//大小写转换
alert(str.toUpperCase()+":"+str.toLowerCase());
//字符串截取
alert(str.substr(0,1)+str.substring(0,1));

  Date对象 

  使用:

    var 变量名=new Date();

  注意:

    获取的是客户端的时间,不能作为系统功能校验的时间

//创建对象日期
var d=new Date();
//操作时间和日期
    //获取年份
    alert(d.year());//返回从1900年算起距今的年份数
    alert(d.getFullYear());//返回当前的年份
    //获取月份
    alert(d.getMonth()+1);//返回当前的月份数
    //获取日期
    alert(d.getDate());//返回当前的日期
    //获取星期数
    alert(d.getDay());//返回星期数,注意星期日返回0
    //获取小时数
    alert(d.getHours());//返回当前小时数
    //获取分钟数
    alert(d.getMinutes());//返回当期分钟数
    //获取秒数
    alert(d.getSeconds());//返回当前秒数

  Math对象

  使用:

    Math.函数名()

    random()

    round()

    ceil()

    floor()

  Global对象

//eval()方法:将字符串转换成js代码执行
eval("var a=123;");

//isNaN():判断Number强转后的内容是否是数字
if(!isNaN(a)){
    alert("是数字");
}else{
    alert("不是数字");
}        
    
//parseInt("abc");   //NaN
//parseInt("12abc");//12
//parseFloat();

 15.js的window对象

  BOM浏览器对象模型:是规范浏览器对js语言的支持(js调用浏览器本身的功能)

  BOM的具体实现是window对象

  window对象的使用

    window对象不用new,直接使用即可,类似Math的使用方式,window关键字可以省略不写

    框体方法

<script type="text/javascript">
    //警告框
    function testAlert(){
        window.alert("aaa");
    }
    //确认框(点击确定返回true,取消返回false)
    function testConfirm(){
        window.confirm("你确认要删除吗?");
    }
     //提示框(点击确定放回当前用户录入的字符串,默认返回空字符串,点击取消返回null)
    function testPrompt(){
        window.prompt("你输入昵称:");
    }
</script>

    定时和间隔执行方法 

<script type="text/javascript">
    //定时执行 指定时间后执行指定的函数 参数1:函数对象 参数2:时间,单位毫秒 返回值:返回当前定时器的id
    function testSetTimeout(){
        window.setTimeout(function(){
            alert("我是定时执行");
        },3000);
    }

    //间隔执行 每间隔指定的时间执行指定的函数 参数1:函数对象 参数2:时间,单位毫秒 返回值:返回当前间隔器的id
    function testSetInterval(){
        window.setInterval(function(){
            alert("我是间隔执行");
        },2000);
    }

    //停止指定的定时方法 参数:定时器的id
    function testClearTimeout(){
        window.clearTimeout(id);
    }

    //停止指定的间隔方法 参数:间隔器的id
    function testClearInterval(){
        window.clearInterval(id);
    }
</script>

    子窗口方法

son.html:

<html>
    <head>
        <title>son</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            //倒计时功能
            function testTime(){
                window.setInterval(function(){
                    var span=document.getElementById("timeSpan");
                    span.innerHTML=span.innerHTML-1;
                    //关闭子页面
                    if(span.innerHTML==0){
                        window.close();
                    }
                },1000);     
            }   
        </script>
    </head>
    <body onload="testTime">
        <h3>son</h3>
        <hr/>
        <b>欢迎来到本页面,<span id="timeSpan" style="color: red;font-size: 20px;">5</span>秒后页面关闭</b>
    </body>    
</html>

window.open('子页面的资源(相对路径)','打开方式','配置');

<script type="text/javascript">
    function testOpen(){
        window.open('son.html','newwindow','height=100,width=400,top=100px,left=320px,toolbar=yes,menubar=yes,scrollbars=yes,resizable=no,location=yes,status=yes');
    }   
</script>

    子页面调用父页面的函数

      window.opener.父页面的函数

<html>
    <head>
        <title>son</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            //倒计时功能
            function testTime(){
                window.setInterval(function(){
                    var span=document.getElementById("timeSpan");
                    span.innerHTML=span.innerHTML-1;
                    //关闭子页面
                    if(span.innerHTML==0){
                        window.close();
                    }
                },1000);     
            }   
            //调用父页面函数
            function testFa(){
                window.opener.testFather();
            }
        </script>
    </head>
    <body onload="testTime">
        <h3>son</h3>
        <hr/>
        <b>欢迎来到本页面,<span id="timeSpan" style="color: red;font-size: 20px;">5</span>秒后页面关闭</b>
        <input type="button" name="" id="" value="调用父页面函数" onclick="testFa"/>
    </body>    
</html>    
<script type="text/javascript">
    function testOpen(){
        window.open('son.html','newwindow','height=100,width=400,top=100px,left=320px,toolbar=yes,menubar=yes,scrollbars=yes,resizable=no,location=yes,status=yes');
    }   
    function testFather(){
        alert("父页面");
    }
</script>

    js的window对象的常用属性

      地址栏属性--location

        作用:资源跳转方式,动态修改地址栏信息  

        window.location.href="新的资源路径"

        window.location.reload()重新加载页面资源  

function testLocation(){
    window.location.href="http://www.baidu.com";
}

function testLocation(){
     //刷新
    window.location.reload();
}

      历史记录属性

        window.history.forwad()   页面资源前进,历史记录的前进

        window.history.back()   页面资源后退,历史记录后退

        window.history.go(index) 跳转到指定的历史记录资源

          注意:

            window.history.go(0);相当于刷新

            window.history.go(1);前一页

function testHistory(){
    window.history.forward();
}

      屏幕属性

        window.screen.width;获取屏幕的宽度分辨率

        window.screen.height;获取屏幕的高度分辨率

function testScreen(){
    var x=window.screen.width;
    var y=window.screen.height;
   alert(x+":"+y);
}

      浏览器配置属性

        window.navigator.userAgent:获取浏览器属性

function testNa(){
    alert(window.navigator.userAgent);
}

      主题面板属性(document)

16.document对象

  概念:

    浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存HTML文档的所有信息

  使用:

    (1)获取HTML元素对象

        直接获取方式:

          通过id

function testGetEleById(){
    var inp=window.document.getElementById("");
    alert(inp);
}

          通过name属性值

function testGetEleByName(){
    var favs=window.document.getElementByName("");
    alert(favs);  
}

          通过标签名

function testGetEleByTagName(){
    var inps=window.document.getElementByTagName("");
    alert(inps);
}

          通过class属性

function testGetEleByClassName(){
    var inps=window.document.getElementByClassName("");
    alert(inps);
}

        间接获取方式:

          父子关系

function testParent(){
    //获取父级元素对象
    var showdiv=document.getElementById("showdiv");
    //获取所有的子元素对象数组
    var childs=showdiv.childNodes;
    alert(childs);
}

          子父关系

function testChild(){
    //获取子元素对象
    var inp=document.getElementById("inp");
    //获取父元素对象
    var div=inp.parentNode;
    alert(div);
}

          兄弟关系

function testBorther(){
    //兄获取弟
    var inp=document.getElementById("inp");
    var preEle=inp.previousSibling;//第获取兄
    var nextEle=inp.nextSibling;//兄获取第
}

    (2)操作HTML元素对象的属性

        获取元素对象

        操作元素属性

          获取

            元素对象名.属性名//返回当前属性的属性值

            元素对象名.getAttribute("属性名");//返回自定义属性的值

          修改

            元素对象名.属性名=属性值

            元素对象名.setAttribute("属性名","新的值");//修改自定义属性的值

          注意:

            尽量不要修改元素的id值和name属性值

            使用自定义方式获取固有属性,value的值获取的是默认值,不能够获取到实时的用户数据

function testFiled(){
    //获取元素对象
    var inp=document.getElement("");
    //获取元素的属性值
    alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
function testFiled2(){
    //获取元素对象
    var inp=document.getElementById("");
    //修改元素属性
    inp.value="哈哈";
    inp.type="button";
}
声明函数--自定义属性
function testOwnField(){
    //获取元素对象
    var inp=document.getElementById("");
    //获取自定义属性的值
    alert(inp.getAttribute("abc"));
}
//修改
function testOwnField2(){
    //获取元素对象
    var inp=document.getElementById("");
    //修改自定义属性的值
    inp.setAttribute("属性名","新的值");
}

    (3)操作HTML元素对象的内容和样式

       操作元素内容

         获取元素对象

           获取

            元素对象名.innerHTML//返回当前元素的所有内容,包括HTML标签

            元素对象名.innerText//返回当前元素的文本内容,不包括HTML标签

           修改  

            元素对象名.innerHTML="新的值"//会将原有内容覆盖,并且HTML标签会被解析

            元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加

            元素对象名.innerText="新的值"//会将原有内容覆盖,但是HTML标签不会被解析,会作为普通文本显示

//获取元素内容
function getContext(){
    //获取元素对象
    var div=document.getElementById("");
    //获取元素内容
    div.innerHTML;
    div.innerText;
}
//获取元素内容
function updateContext(){
    //获取元素对象
    var div=document.getElementById("");
    //修改元素内容
    div.innerHTML="12332";
    div.innerHTML="<b>12332</b>";      
}

      操作元素样式--style方式

function testOperCss(){
    //获取元素对象
    var showdiv=document.getElementById("");
    //添加元素样式
    showdiv.style.backgroundColor="red";
    //修改
    showdiv.style.border="solid 2px red";
    //删除
     showdiv.style.border="";
}    

      操作元素样式--className方式

function testOperCss2(){
    //获取元素对象
    var div=document.getElementById("");
    //获取
    div.className
    //修改类选择器样式
    div.className="新的值";
    //添加类选择器样式
    div.className="新的值";
    //删除
    div.className="";
}    

    (4)操作HTML的文档结构

       增加节点

       删除节点

       第一种方式:使用innerHTML

             父节点.removeChild(子结点对象)//删除指定的子节点

function testAdd(){
    //获取元素对象
    var showdiv=document.getElementById("showdiv");
    //给div追加上传按钮
    showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file'  value='' /><input type='button' value='删除' onclick='delInp(this)'/></div>";
}    

function delInp(btn){
    //获取父级div
    var showdiv=document.getElementById("showdiv");
    //获取要删除的子div
    var cdiv=btn.parentNode; 
    //父div删除子div
    showdiv.removeChild(cdiv);
}

        第二种方式:

function testOper2(){
    //获取元素对象
    var showdiv=document.getElementById("");
    //创建input元素对象
    var inp=document.createElement("input");
    inp.type="file";
    //创建按钮元素对象
    var btn=document.createElement("input");
    btn.type="button";
    btn.value="删除";
    btn.onclick=fuction(){
        showdiv.removeChild(inp);
        showdiv.removeChild(btn);
        showdiv.removeChild(br);
    }
    //创建换行符
    var br=document.createElement("br");
    //将创建的元素对象存放在div种
    showdiv.appendChild(inp);
    showdiv.appendChild(btn);
    showdiv.appendChild(br);
}    

    (5)document操作Form元素

       获取表单对象

         使用id: var fm=documentElementById("fm");

         使用name属性:var frm=document.frm;

       获取form下的所有表单元素对象集合

         表单对象.elements

       form表单的常用方法

         表单对象.submit();//提交表单

         表单对象.reset();//清空表单

       form表单的属性操作

         表单对象.action="新的值";//动态的改变数据的提交路径

         表单对象.method="新的值";//动态的改变提交方式

       form表单元素的通用属性

         readonly:不可以更改,但是数据可以提交

         disabled:不可以进行任何操作,数据不会提交

 

function testForm(){
    //获取form表单对象
    var fm=documentElementById("fm");
    //获取form表单元素对象集合
    fm.elements

    (6)document操作表单元素

        js操作多选框、单选框

          被选中状态下在js中checked属性值为true,未选中状态为false

        js操作下拉框

          被选中的option对象在js中selected属性值为true,未选中状态为false

function testCheckBox(){
    //获取所有的多选元素对象数组
    var favs=document.getElementsByName("fav");
    //遍历数组
    for(var i=0;i<favs.length;i++){
        if(favs[i].checked){
            ...
        }
    }
}

function testSel(){
    //获取下拉框对象
    var sel=document.getElementsByName("***");
    //获取option对象集合
    var os=sel.options;
    for(var i=0;i<os.length;i++){
        if(os[i].select){
            ...
        }
    }
}

        

    (7)document对象实现form表格校验

        通过监听事件+正则进行逻辑判断

    (8)document操作table表格

        行对象.rowIndex//返回行对象的角标

        删除行:表格对象.deleteRow(要删除的行对象的角标);

<tr id="t1">
    <td>java从入门到放弃</td>
    <td>wollo<td>
    <td>43.50</td>
    <td id="ceil">3</td>
    <td align="center">
        <input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
        <input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
    </td>
</tr>
<script type="text/javascript">
    function delRow(btn){
        //获取table对象
        var ta=document.getElementById("ta");
        //获取需要删除的行对象
        var tr=btn.parentNode.parentNode;
        //删除行
        ta.deleteRow(tr.rowIndex);
    }
</script>

         修改行

function updateRow(btn){
    //获取单元格对象
        //获取行对象
        var tr=btn.parentNode.parentNode;
        var cell=tr.cells[3];
    //判断单元格内容
    if(!isNaN(Nummber(cell.innerHTML))){
        //修改单元格内容
        cell.innerHTML="<input type='text' value='" +cell.innerHTML+ "' onblur='updateRow2(this)'/>";
    }
}

function updateRow2(inp){
     //获取单元格对象
    var cell=inp.parentNode;
    //实现保存
    cell.innerHTML="inp.value";
}

 

         选择删除

function chooseDel(){
    //获取表格对象
    var ta=document.getElementById("ta");
    //获取要删除的行号
    var chks=document.getElementsById("chks");
    for(var i=0;i<chks.length;i++){
        if(chks[i].checked){
            //删除行
            ta.deleteRow(i--);
        }
    }
}

        添加行

function addRow(){
    //获取表格对象
    var ta=document.getElementById("ta");
    //添加行
    var tr=ta.insertRow(1);
    //添加单元格
    var cell0=tr.insertCell(0);
    cell0.innerHTML="<input type='checkbox' name='chk'/>";
    tr.insertCell(1);
    cell1.innerHTML="<input ... />";
    tr.insertCell(2);
    cell2.innerHTML="<input ... />";
    tr.insertCell(3);
    cell3.innerHTML="<input ... />";
    tr.insertCell(4);
    cell4.innerHTML="<input ... />";
    tr.insertCell(5);
    cell5.style.textAlign="center";
    cell5.innerHTML="<input type='button' value='修改数量' onclick='updateRow(this)' /><input type='button' value='删除' onclick='delRow(this)' />";
}

 

posted @ 2019-06-23 22:17  M_x_j  阅读(239)  评论(0编辑  收藏  举报