javaScript操作DOM学习笔记

来源：互联网发布：开淘宝店需要用电脑吗编辑：程序博客网时间：2024/05/21 22:44

    //实现下拉列表的功能

<span style="white-space:pre"></span>function show() {    document.getElementById("sh").innerHTML = "<h2>HelloWorld</h2>";    }    function setFun() {    var id = new Array(1,2,3);    var value = new Array("北京","上海","广州");    var select = document.getElementById("area");    select.length = 1;    select.options[0].selected = true;    for(var x=0;x<id.length;x++) {    var option = document.createElement("option");    option.setAttribute("value", id[x]);    option.appendChild(document.createTextNode(value[x]));    select.appendChild(option);    }    }

var count = 3;    <span style="white-space:pre"></span>function insertRowa() {    <span style="white-space:pre"></span>var mytable = document.getElementById("mytable");    <span style="white-space:pre"></span>var tr = mytable.insertRow();    <span style="white-space:pre"></span>var td1 = tr.insertCell();    <span style="white-space:pre"></span>var td2 = tr.insertCell();    <span style="white-space:pre"></span>var td3 = tr.insertCell();    <span style="white-space:pre"></span>td3.innerHTML = "美国" + count;    <span style="white-space:pre"></span>td2.innerHTML = "芝加哥" + count;    <span style="white-space:pre"></span>td1.innerHTML = "<input type='button' value='-' onclick='deleteRowa(this)''>";    <span style="white-space:pre"></span>count++;    <span style="white-space:pre"></span>}    <span style="white-space:pre"></span>function deleteRowa(btn) {    <span style="white-space:pre"></span>var row = btn.parentNode.parentNode;    <span style="white-space:pre"></span>var table = document.getElementById("mytable");    <span style="white-space:pre"></span>table.deleteRow(row.rowIndex);    <span style="white-space:pre"></span>alert("a");    <span style="white-space:pre"></span>}

<body onload="setFun()">  <span style="white-space:pre"></span><h1>jsDom1</h1>  <span style="white-space:pre"></span><input type="button" id="insertRow" value="+" onclick="insertRowa()">  <span style="white-space:pre"></span><table id="mytable" border="1">  <span style="white-space:pre"></span><tr>  <span style="white-space:pre"></span><td>中国</td>  <span style="white-space:pre"></span><td>北京</td>  <span style="white-space:pre"></span><td><input type="button" value="-" onclick="deleteRowa(this)"></td>  <span style="white-space:pre"></span></tr>  <span style="white-space:pre"></span>  <span style="white-space:pre"></span><tr>  <span style="white-space:pre"></span><td>俄罗斯</td>  <span style="white-space:pre"></span><td>墨西哥</td>  <span style="white-space:pre"></span><td><input type="button" value="-" onclick="deleteRowa(this)"></td>  <span style="white-space:pre"></span></tr>  <span style="white-space:pre"></span></table>  </body>

function insert() {    <span style="white-space:pre"></span>var table = document.getElementById("mytable");    <span style="white-space:pre"></span>var tbody = document.createElement("tbody");    <span style="white-space:pre"></span>var tr = document.createElement("tr");    <span style="white-space:pre"></span>var td_id = document.createElement("td");    <span style="white-space:pre"></span>var td_name = document.createElement("td");    <span style="white-space:pre"></span>var value_id = document.getElementById("id").value;    <span style="white-space:pre"></span>var value_name = document.getElementById("name").value;    <span style="white-space:pre"></span>td_id.appendChild(document.createTextNode(value_id));    <span style="white-space:pre"></span>td_name.appendChild(document.createTextNode(value_name));    <span style="white-space:pre"></span>tr.appendChild(td_id);    <span style="white-space:pre"></span>tr.appendChild(td_name);    <span style="white-space:pre"></span>tbody.appendChild(tr);    <span style="white-space:pre"></span>table.appendChild(tbody);    <span style="white-space:pre"></span>}

<body>  <span style="white-space:pre"></span><h1>jsDom3</h1>  <span style="white-space:pre"></span><input type="text" id="id">  <span style="white-space:pre"></span><input type="text" id="name">  <span style="white-space:pre"></span><input type="button" name="btn" value="添加" onclick="insert()">  <span style="white-space:pre"></span>  <span style="white-space:pre"></span><table id="mytable">  <span style="white-space:pre"></span><tr>  <span style="white-space:pre"></span><td>编号</td>  <span style="white-space:pre"></span><td>姓名</td>  <span style="white-space:pre"></span></tr>  <span style="white-space:pre"></span></table>  </body>

0 0