使用引導程序在javascript DOM上定位

我打算創建一個動態文本框，即使對於textbox_value的奇數計數，它也會分成兩行，但在代碼上有問題。使用引導程序在javascript DOM上定位

MY預期輸出：

我需要有讀數1和相同的行讀5以及閱讀2和相同的行讀6 讀取3個和上讀7同一行單獨在一行上閱讀4。

積溫OUTPUT ON我的代碼：

它看起來像文本框閱讀5,6和7被定位在同一行作爲讀4.

代碼片斷：

var textbox_value = 7; 

for (var count = 1; count <= Math.round(textbox_value/2); count++){ 
     var childdiv = document.createElement("div"); 
     childdiv.className = "row"; 
     var textboxdiv = document.createElement("div"); 
     textboxdiv.className = "col-md-6"; 
     var label = document.createElement("label"); 
     label.innerHTML = display+' '+count; 
     var input = document.createElement("input"); 
     input.id = textbox_group+count; 
     input.className = "form-control circle"; 
     input.type = "text"; 
     input.setAttribute("placeholder", display+' '+count); 
     input.setAttribute("ng-model", "field."+textbox_group+"["+count+"]"); 
     input.setAttribute("onkeypress","ValidationNum('"+textbox_group+count+"',$(this).val())"); 
     input.setAttribute("onkeyup", "get_meter_data_capture('onclick','"+special_meter_tag+"')"); 


     textboxdiv.appendChild(label); 
     textboxdiv.appendChild(input); 
     childdiv.appendChild(textboxdiv); 
     parentdiv.appendChild(childdiv); 
    } 

    for (var count2 = Math.round(textbox_value/2)+1; count2 <= textbox_value; count2++){ 
     var textboxdiv2 = document.createElement("div"); 
     textboxdiv2.className = "col-md-6" 
     var label2 = document.createElement("label"); 
     label2.innerHTML = display+' '+count2; 
     var input2 = document.createElement("input"); 
     input2.id = textbox_group+count2; 
     input2.className = "form-control circle"; 
     input2.type = "text"; 
     input2.setAttribute("placeholder", display+' '+count2); 
     input2.setAttribute("ng-model", "field."+textbox_group+"["+count2+"]"); 
     input2.setAttribute("onkeypress","ValidationNum('"+textbox_group+count2+"',$(this).val())"); 
     input2.setAttribute("onkeyup", "get_meter_data_capture('onclick','"+special_meter_tag+"')"); 


     textboxdiv2.appendChild(label2); 
     textboxdiv2.appendChild(input2); 
     childdiv.appendChild(textboxdiv2); 
     parentdiv.appendChild(childdiv); 
    }

來源

2017-06-05 Jopekz

用你的話說，你的問題是什麼？你確定你需要在問題中包含所有的代碼嗎？ – evolutionxbox

問題是我沒有得到結果，我很困惑如何獲得我的預期結果。我可能已經做了我的代碼錯誤 – Jopekz

_將問題分解成更小的__。我覺得這太大了，無法解決一個問題。 – evolutionxbox

您可以先創建一行，然後再創建2列，並將ur文本框添加到這些列，如

<div class="row"> 

<div class="col"> 
for(var i=1;i<=count/2;i++){ 
<div> ur label and textbox </div> 
} 
</div> end of first column 

<div class="col"> 
for(var i=count/2+1;i<=count;i++) { 
<div> ur label and textbox </div> 
} 
</div> end of second column 

<div> end of row

來源

2017-06-05 10:19:49

感謝您的回覆。是的，這是邏輯，但我必須堅持我的編碼格式。 – Jopekz

使用引導程序在javascript DOM上定位

回答

相關問題