//表单的增删
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td, th { height: 40px; line-height: 25px; width: 250px; font-size: 25px; } .active { border: none; outline: none; } </style> </head> <body> <table border="1" cellspacing="0" style="text-align: center;"> <tr style="background: #ccc"> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>操作</th> </tr> <tbody id="table"> <tr id="trs"> <td>玫瑰保湿睡眠面膜</td> <td>5</td> <td>¥48</td> <td> <input type="button" value="删除" onclick="remove(this)"> <input type="button" value="修改" onclick="change(this)"> </td> </tr> <tr> <td colspan="4"><input type="button" value="增加订单" id="btn"></td> </tr> </tbody> </table> <script> var oBtn = document.getElementById("btn"); var oTab = document.getElementById("table"); var trs = document.getElementById("trs"); var i = 0; // oBtn.onclick = function () { // i++; // var oTr = document.createElement("tr"); // oTr.innerHTML =trs.innerHTML; // oTab.insertBefore(oTr, oTab.lastElementChild); // } // // // function remove(that) { // console.log(that); // oTab.removeChild(that.parentNode.parentNode) // } // // function change(that) { // that.value = "确认"; // var Ipt = document.createElement("input"); // Ipt.className = "active"; // Ipt.value = that.parentNode.parentNode.firstElementChild.innerHTML; // that.parentNode.parentNode.firstElementChild.innerHTML = ""; // that.parentNode.parentNode.firstElementChild.appendChild(Ipt) // // that.onclick = function () { // sure(this) // } // } // // function sure(that) { // console.log(that); // var otd = that.parentNode.parentNode.firstElementChild; // that.value = "修改"; // otd.innerHTML = otd.firstElementChild.value; // that.onclick = function () { // change(this) // } //
// }
///函数的封装
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ul"> <li class="a abc abcd abcde ">1</li> <li class="c a">2</li> <li class="aa">3</li> <li class="a c b r f">4</li> <li class="b">5</li> </ul> <div id="div"> <b class="div">12312</b> <div class="divvv">aisdjfoa </div> <h1 class="div div1"> 23456</h1> <p class="div2 "> pppp</p> </div> <script> for (var i = 0; i <rua("div","div").length; i++) { rua("div","div")[i].style.color = "blue"; }//函数已经封装好,直接调用就行; // var arrLi=document.getElementsByClassName("a"); // for(var i=0;i<arrLi.length;i++){ // arrLi[i].style.background="red"; // } function rua(ul,a) { var oUL = document.getElementById(ul); var arrLi = oUL.getElementsByTagName("*");//寻找到父元素下的所有标签 //存放含有我需要类名的标签 var arLII = []; //var regExp=/a/; //console.log(typeof arrLi[0].getAttribute("class"));//typeof//可以检查基本数据类型的类型.//insatance of/所有对象.类型 for (var i = 0; i < arrLi.length; i++) { // regExp.test(arrLi[i].getAttribute("class")) // var arrString =arrLi[i].getAttribute("class").split(" ") var arrString = arrLi[i].className.split(" ")//转化为 所有类数组 // arrString=[a ,abc ,abcd , abcde] for (j in arrString) { if (arrString[j] == a) { arLII.push(arrLi[i])//找到一样的就添加到空数组里 } } } return arLII;//返回空数组.返回才能得到 } // rua("ul","a") for (var i = 0; i <rua("ul","a").length; i++) { rua("ul","a")[i].style.background = "red"; } </script> </body> <script> //一号 // function rua(classR,ruaC) { // ruaC=ruaC||document; // if(ruaC.getElementsByClassName){ // return ruaC.getElementsByClassName(classR); // }else{ // var RR=ruaC.getElementsByTagName("*"); // var ru=[]; // for (var i=0;i<RR.length;i++){ // var aa=RR[i].className.split(" "); // for(var p=0;p<aa.length;p++){ // if(aa==classR){ // ru.push(RR[i]); // } // } // // } // return ru; // } // } // var Rul=document.getElementsByTagName("ul")[0]; // rua("RRR",Rul)[0].style.color="red"; </script> </html>