dom 中函数的封装,以及用dom 制作表单的增删

//表单的增删

<!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>&yen;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>

dom 中函数的封装,以及用dom 制作表单的增删

猜你喜欢