iT邦幫忙

0

複製div

js
  • 分享至 

  • xImage
  •  

複製div的方法:使用jquery的語法,但是需要注意的是多次複製的bug:
複製的code:
要複製的div是:

 <div class="container myPersonInterduction_container border">
        <div class="row">
            <div class="col-1"> 
                <input class="form-check-input" type="checkbox">
            </div>
            <div class="col-3"> 
                <img id='showPigeonImage' src="{% static 'images/652206.png' %}" class="myPersonInterduction_image">
            </div>
            <div class="col-7" id = 'pigeonInfors'> 
                <ul class="list-group text-center">
                    <li class="list-group-item">公環號碼:</li>
                    <li class="list-group-item">性別:</li>
                    <li class="list-group-item">鴿齡:</li>
                    <li class="list-group-item">重量:</li>
                    <li class="list-group-item">身長:</li>
                    <li class="list-group-item">翅膀長度:</li>
                  </ul>
            </div>
            <div class="col-1"> 
                <button type="button" class="btn btn-info" onclick="func_cb_button_updatePigeon(this)" id="button_updatePigeon">修改</button>
            </div>
        </div>
    </div>

js中複製的code:

 function copy_pigeonImformationDiv(pigeonInfos)
        {
            var newPersonInterduction_container = document.createElement('div');
            var $myPersonInterduction_container = $('.myPersonInterduction_container').clone();//基本複製語法
            // console.log($myPersonInterduction_container,typeof($myPersonInterduction_container),($myPersonInterduction_container).length);
            $(newPersonInterduction_container).html(($myPersonInterduction_container)[0]);//基本複製語法,多次複製的時候需要注意的bug:多次複製後,會變成多個,這時候,我們本來想複製單個的情況,就需要這樣寫了;
            var li_list = newPersonInterduction_container.getElementsByTagName('li');
            li_list[0].innerHTML = "公環號碼:"+pigeonInfos[2];
            li_list[1].innerHTML = "性別:"+pigeonInfos[7];
            li_list[2].innerHTML = "鴿齡:"+pigeonInfos[8];
            li_list[3].innerHTML = "重量:"+pigeonInfos[11];
            li_list[4].innerHTML = "身長:"+pigeonInfos[9];
            li_list[5].innerHTML = "翅膀長度:"+pigeonInfos[10];

            var checkboxList = newPersonInterduction_container.getElementsByTagName('input');
            checkboxList[0].value = pigeonInfos[0];
            var button = newPersonInterduction_container.getElementsByTagName('button');
            button[0].value = pigeonInfos[0];
            console.log(button[0],button[0].value);
            document.body.appendChild(newPersonInterduction_container);
        };
``

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言