JavaScript操作表格和选择框

表格

A.创建表格

//创建 table

var table = document.createElement("table");

table.border = 1;

table.width="100%";

//创建 tbody

var tbody = document.createElement("tbody");

//添加tbody

table.appendChild(tbody);

-------DOM-------

//创建第一行

var row1 = document.createElement("tr");

//添加第一行

tbody.appendChild(row1);

//创建第一行第一个单元格

var cell1_1 = document.createElement("td");

//添加第一行第一个单元格的文本

cell1_1.appendChild(document.createTextNode("Cell 1,1"));

//添加第一行第一个单元格

row1.appendChild(cell1_1);

--------table属性和方法---------

//创建第二行并添加

tbody.insertRow(1);

//创建第二行第一个单元格并添加

tbody.rows[1].insertCell(0);

//创建第二行第一个单元格文本并添加

tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中

document.body.appendChild(table);

B.删除表格

//删除第一行第一个单元格(DOM)

row1.removeChild(row1.firstChild);

//删除第二行第一个单元格(table属性和方法)

tbody.rows[1].deleteCell(0);

选择框

A.添加选项

    a1.DOM方式

         //创建option对象

         var newOption = document.createElement("option");

         //添加option文本

         newOption.appendChild(document.createTextNode("Option text"));

         //设置option value值

         newOption.setAttribute("value", "Option value");

         //添加option对象

         selectbox.appendChild(newOption);

    a2.Option构造函数

         //创建option对象

         var newOption = new Option("Option text", "Option value");

        //添加option对象

        selectbox.appendChild(newOption);

    a3.select的add方法

         //添加option对象

         selectbox.add(newOption,relOption)

B.移除选项

    b1.DOM方式

         //移除option对象

         selectbox.removeChild(selectbox.options[0]);

    b2.选择框的remove方法

        //移除option对象

        selectbox.remove(0);

    b3.移除选项置为null

        selectbox.options[0]=null;