如何創建動態對象HTML並分配給定的基於屬性的數據

Question

我有一個動態對象（按鈕和文本框），由jquery每次按添加傳輸時創建。 我從這個論壇上獲取了這段代碼，並做了一些修改以適應我的觀點（感謝誰創建了這段代碼）。

首先讓我詳細介紹我的動態項目：

我的一組組數據是Trip[], Bus No[] and Amount[] 。 該集合可以是多個，但每個組只能包含3個項目。

trip[] = button object
busno[] = text object
amount = text object

以下是我的HTML腳本：

    <div class="purchase-items-fieldset" style="clear:both;">
        <div class="purchase-items-wrapper">
            <div class="purchase-items">                            
                        <ul>
                        <li>
                        <input type="button" name="trip[]" value="PB" class="field btn-field">
                        </li>
                        <li>
                        <input type="text" name="busno[]" class="field txt-field">
                        </li>
                        <li>
                        <input type="text" name="amount[]" class="field txt-field">
                        </li>
                        </ul>
                <input type="button" class="remove-line btn-remove" style="border:solid">
            </div>
        </div>
        <button type="button" id="btnAddTrans" class="add-field" style="display: none">Add field</button>
    </div>

假設我有2組組數據，如下所示***(mydata="PB,WBX001,1000,P,WBK001,500")***

然后，我的計划是：

Group 1
trip[]=PB
busno[]=WBX001
amount[]=1000

Group 2 
trip[]=P
busno[]=WBK001
amount[]=500 

我想在其中jQuery / Javascript創建2組動態對象，並根據上述計划為每個對象分配值：-

function assigndatatrip (mydata) {
        //mydata="PB,WBX001,1000,P,WBK001,500"
        //each 3 item are 1 set group data etc: PB,WBX001,500

        //do split function and count how many set group
                 // create dynamic object
                 // assign data for dynamic object
        //loop
        //else no more data to assign then exit-return             
    }

我不知道從哪里開始，因為我對javascript / jquery函數不太滿意。

我希望遇到這個問題的任何人都能分享並幫助我如何解決這個問題。 預先感謝誰正在閱讀並回答此問題。

謝謝。

Answer 1

如果您具有用於數據的結構： "each three items a group" 。

然后，您可以應用以下邏輯：

 $(document).ready(function() { //Initialize vars var start, mydata = ["PB", "WBX001", "1000", "P", "WBK001", "500"] //Loop to create items based on the array amount/3 for (start = 0; start < (mydata.length / 3); start++) { //Target the elements of the array you need for each group var trip = start * 3, busno = trip + 1, amount = trip + 2; //Create the element to append var item = "<div class='item'><ul><li>" + mydata[trip] + "</li><li>" + mydata[busno] + "</li><li>" + mydata[amount] + "</li></ul></div>"; //Append the group element $('body').append(item); } }) 

 .item { color: white; background: purple; margin: 20px auto; padding: 25px; } .item li { list-style: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

我必須感謝DaniP的精神和友善，不加要求地提供幫助。 再次感謝。

對於上述問題，我想了很多次，我無法使用DaniP整個解決方案，因為我已經有了AddTrans，SaveTrans等功能。 我的關鍵部分只是如何顯示我已經保存的所有數據。 由於對象是動態的，老實說，我的頭不舒服，我真的對javascript / jquery編碼不好。

好。 如果有人在Div內使用Dynamic Object並且已經完美運行，但是不知道在創建動態對象時如何顯示數據，那么請考慮以下我的代碼是您參考中的解決方案之一。

 function assigndatatrans(mydata) {
    //var mydata = "PB,WBX001,500,P,WBK001,300"
    var gdata = mydata.split(',').length / 3;
    for (start = 0; start < gdata - 1; start++) {
        $('#btnremove').click();
        clickaddtrans();
    }
    var substr = mydata.split(',');
        $.each($('.field'), function (index,value) {
            $(this).val(substr[index]);
        });
}

讓我為我自己解釋代碼（我仍在學習JQuery函數的過程中）：-

首先是從數據庫獲取數據字符串

//var mydata = "PB,WBX001,500,P,WBK001,300"

那么我需要計算一下我有多少組數據，每3個項目是1組，那么我需要做少量計算

var gdata = mydata.split(',').length / 3;

之后，我知道我已經具有AddTrans和RemoveTrans函數，然后我需要先清除我的動態對象，然后根據應顯示的組數再次顯示它：

for (start = 0; start < gdata - 1; start++) {
        $('#btnremove').click();
        clickaddtrans();
    }

最后，我最近在JQuery上學習了一些函數$ .each和Index and Value，並嘗試應用以確保我的數據字符串可以完美地插入到動態對象的每個字段中。 我認為這部分對我來說真的很棘手，我花了很多時間使它起作用。

var substr = mydata.split(',');
    $.each($('.field'), function (index,value) {
        $(this).val(substr[index]);
    });

僅此而已...現在，我可以使輸出運行平穩且可行。 我不能說完美！ 因為我相信所有閱讀此問題的人都可以做得更好，而且要優越得多。

無論如何，非常感謝，並睡得很好。 :)