首頁 > 開發者 > JavaScript

用JavaScript實現repeat 迴圈添加操作

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
<html>
    <head>
        <title>Dynamic Table</title>
   
    <style type="text/css">

.repeat {
}

.repeat-prototype {
    display: none;
}

.repeat-item {
}

.repeat-item fieldset{
    padding:3px;
    margin:3px;
}

.repeat-index {
    background: #BCD884;
}

.repeat-selector {
    float: left;
}

.selector-prototype {
    display: none;
}

.compact-repeat .repeat-item td{
    padding:3px;
}
   
    </style>   
       
              <script language="javascript">
             
                function addRow(){
                var target = document.getElementById("propotype-tt");
                var prototype = target.cloneNode(true);
                prototype.className="repeat-item";
                var repeatElement = target.parentNode;
                var repeatItems = repeatElement.childNodes;
                var referenceNode = repeatItems[repeatItems.length -1];
                repeatElement.insertBefore(prototype,referenceNode);
            }

function setRepeatIndex(e) {

    var target;
    var parentElement;
    if (window.event) {
        // stop event propagation (for IE)
        window.event.cancelBubble = true;
        target = window.event.srcElement;
    }
    else {
        e.cancelBubble = true;
        target = e.target;
    }
    // lookup repeat item
    while (target && ! _hasClass(target, "repeat-item")) {       
        target= target.parentNode;
    }

    // maybe the user clicked on a whitespace node between to items *or*
    // on an already selected item, so there is no item to select
    if ((!target) || _hasClass(target, "repeat-index")) {
        return;
    }
   
    target.setAttribute("selected", "true");
    var currentPosition= 0;   
    var repeatItems = target.parentNode.childNodes;
    for (var index = 0; index < repeatItems.length; index++) {
        if (repeatItems[index].nodeType == 1 && _hasClass(repeatItems[index], "repeat-item")) {
        currentPosition++;
            if (repeatItems[index].getAttribute("selected") == "true") {
                repeatItems[index].removeAttribute("selected");
                mytable_index = currentPosition;
            }
            _removeClass(repeatItems[index], "repeat-index")
        }
    }
    _addClass(target,"repeat-index");
   

}

function _hasClass (element, clazz) {
    if (!element || !element.className) {
        return false;
    }

    // surround classes with spaces to guarantee non-ambigous lookups
    if ((" " + element.className + " ").indexOf(" " + clazz + " ") == -1) {
        return false;
    }

    return true;
}

function _addClass (element, clazz) {
    if (!element || !element.className) {
        return false;
    }

    // surround classes with spaces to guarantee non-ambigous lookups
    if ((" " + element.className + " ").indexOf(" " + clazz + " ") == -1) {
        element.className = element.className + " " + clazz;
        return true;
    }

    return false;
}

function _removeClass (element, clazz) {
    if (!element || !element.className) {
        return false;
    }

    // surround classes with spaces to guarantee non-ambigous lookups
    if ((" " + element.className + " ").indexOf(" " + clazz + " ") > -1) {
        var classList = (" " + element.className + " ").replace(new RegExp(" " + clazz + " "), " ");
        element.className = classList.slice(1, classList.length - 1);
        return true;
    }

    return false;
}

/*
Move a table row down, rotating to the top
if it's the last row.
*/
function moveRowDown()
{
    if(mytable_index==null){
        return;
    }
    var prototype = document.getElementById("propotype-tt");
    var repeatElement = prototype.parentNode;
    var repeatItems = repeatElement.childNodes;
    var fromElement;
    var toElement;
    var currentPosition=0;
       for (var index = 0; index < repeatItems.length; index++) {
         if (repeatItems[index].nodeType == 1 && _hasClass(repeatItems[index], "repeat-item")) {
          currentPosition++;
             if (currentPosition==mytable_index) {
                   fromElement = repeatItems[index];
                   toElement = repeatItems[index+2];
                   break;                  
             }
         }
      }
    var clonedElement = fromElement.cloneNode(true);
    var tempElement = repeatElement.removeChild(fromElement);
        repeatElement.insertBefore(clonedElement,toElement);
        mytable_index++;

 }

/*
Move a table row up, rotating to the bottom
if it's the first row.
*/
function moveRowUp()
{
    if(mytable_index==null){
        return;
    }
    var prototype = document.getElementById("propotype-tt");
    var repeatElement = prototype.parentNode;
    var repeatItems = repeatElement.childNodes;
    var fromElement;
    var toElement;
    var currentPosition=0;
       for (var index = 0; index < repeatItems.length; index++) {
         if (repeatItems[index].nodeType == 1 && _hasClass(repeatItems[index], "repeat-item")) {
          currentPosition++;
             if (currentPosition==mytable_index) {
                   fromElement = repeatItems[index];
                   toElement = repeatItems[index-1];
                   break;                  
             }
         }
      }
    var clonedElement = fromElement.cloneNode(true);
    var tempElement = repeatElement.removeChild(fromElement);
        repeatElement.insertBefore(clonedElement,toElement);
        mytable_index--;

}

       
    </script>   
    </head>
    <body>
    <h1>Dynamic Table</h1>
    <form method="get" action="req.jsp">
        <input type="button" name="btnAdd" value="Add" onClick="javascript:addRow()">
        <input type="button" name="btnDownn" value="Down" onClick="javascript:moveRowDown()">   
        <input type="button" name="btnUp" value="Up" onClick="javascript:moveRowUp()">           
        <input type="submit" name="btnSave" value="Save">       
        <table id="mytable">
        <script>
        document.getElementById('mytable').onclick = setRepeatIndex;
        var mytable_index;
        </script>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Address</td>
            <td>Delete</td>
        </tr>
        <tr id="propotype-tt" class="repeat-prototype">
            <td><input type="text" name="name"></td>
            <td><input type="text" name="age"></td>
            <td><input type="text" name="address"></td>
            <td><input type="button" value="Remove" style="font-size: 10px"
        onClick="
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        "></td>
        </tr>
        </table>
    </form>   
    </body>
</html>

注意：
    用JavaScript實現對Table的操作的時候，使用insertBefore方法的時候需要注意一點。如果直接在對Table 對象用insertBefore(TRObject, referenceObject)時候是不能成功的，因為TR是在TBODY的子物件，不是TABLE的子物件。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
repeat symbol symbol repeat repeat dialer php repeat regex repeat string repeat mysql repeat function
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More