Question

每次按Add Transport时，我都会通过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"。

然后你可以应用这个逻辑：

＆＃13;

$(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);
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

I must thanks to DaniP who have spirit and kindness, helping without asking. Thanks again.

I think and think many time regarding problem above, I can't use DaniP entire solution because I already have function AddTrans, SaveTrans and many more. My critical part only how to display back all a data I already save. Since object are dynamic my head getting sick to think and honestly I really bad on javascript/jquery coding.

Ok. If anybody using Dynamic Object inside Div and already run perfectly but do not know how to display back a data while create dynamic object then please consider my code below are one of solution on your reference.

 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]);
        });
}

Let me explain my code for myself (I still on learning process JQuery function):-

First thing first is data string get from database

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

then I need to count how many group data I have, each 3 item are 1 group then I need do small calculation

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

After that, I know I already have function AddTrans and RemoveTrans then I need to clear first my dynamic object and show it again based how many group should be appear:-

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

Finally, I learn some function $.each and Index and Value on JQuery recently and I try apply to make sure my data string can be perfectly insert into each field on my dynamic object. I think this part are really tricky for me and I try many time to make it working.

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

That's all.... Now I can get my output run smoothly and workable. I can't say perfect! because I believe yours all who read this question can do better than this and far far more superior.

Anyway thanks so much and sleep well. :)

如何创建动态对象HTML并分配给定的基于属性的数据

2 个答案: