jquery手機：動態創建的複選框應自動移動到下一列

Question

我有一個文本框和一個頁面中的按鈕，一旦你輸入一個文本，然後點擊按鈕它應該創建一個動態的文本框中輸入的值在文本框

如何在行中最多創建10個複選框，並在列中創建5個複選框。到達10行復選框後，下一個複選框應從下一列開始。如何實現此操作請幫助.. 這裏是我的編碼..

HTML

<input type="text" id="txtName" /> 
    <center> 
     <a href="#" class="ui-btn ui-corner-all ui-btn-inline ui-btn-b ui-icon-plus ui-btn-icon-left" id="btn1" data-role="button">Add</a> 
    </center> 
    <div id="cblist"></div> 

JS

$(document).on("pageinit","#pagetobringone",function(){ 
    $('#btn1').click(function() { 
     addCheckbox($('#txtName').val()); 
    }); 
}); 


function addCheckbox(name) { 
    var container = $('#cblist'); 
    var inputs = container.find('input'); 
    var id = inputs.length+1; 

    $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container); 
    $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container); 
} 

Answer 1

我想你可以使用HTML <table>並創建一個新的行每十複選框。將一個表中的cblist中的容器：

<div id="cblist"> 
    <table> 
     <tbody></tbody>    
    </table>   
</div> 

然後在addCheckbox功能，使用modulus.remainder operator（％）來計算時，需要一個新的行

function addCheckbox(name) { 
    var container = $('#cblist'); 
    var inputs = container.find('input'); 
    var IsNewRow = inputs.length % 10 == 0; 
    var id = inputs.length+1; 
    if (id > 50) return; 

    if (IsNewRow){ 
     //append new row every 10 checkboxes 
     $('#cblist tbody').append("<tr></tr>"); 
    } 
    //find last row in the table 
    var $row = $('#cblist tbody tr:last-child') 

    var $td = $('<td />'); 
    $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo($td); 
    $('<label />', { 'for': 'cb'+id, text: name }).appendTo($td); 
    $row.append($td); 
    container.enhanceWithin(); 
} 

工作DEMO

Answer 2

checkbo x或一個textarea？問題不是很清楚。不過兩者都容易，做了一個演示給你，它似乎做的工作，對按鈕的唯一ID，並檢查或盒子，如果你想獲取數據

演示覆選框以提交按鈕

http://jsfiddle.net/dmbba978/

與演示textarea的提交按鈕

http://jsfiddle.net/rvfrmas1/

演示textarea的一個布頓

http://jsfiddle.net/38Lf1xLL/

演示覆選框一個布頓

http://jsfiddle.net/gvje5f4k/

var a = 1; 
var b = 1; 
var c = 1; 
var pagedata = $('<td><textarea cols="10" rows="2" name="textarea-'+ c +'" id="textarea-1">Textarea</textarea> <input type="button" value="Submit" id="sub' + c +'"></td>');  

pagedata.appendTo("#form1"); 

$("#form1").enhanceWithin(); 

$(document).on("click", "#sub1, #sub2,#sub3,#sub4,#sub5,#sub6,#sub7,#sub8,#sub9,#sub10,#sub11,#sub12,#sub13,#sub14,#sub15,#sub16,#sub17,#sub18,#sub19,#sub20,#sub21,#sub22,#sub23,#sub24,#sub25,#sub26,#sub27,#sub29,#sub30,#sub31,#sub32,#sub33,#sub34,#sub35,#sub38,#sub37,#sub39,#sub40,#sub41,#sub43,#sub43,#sub44,#sub45,#sub46,#sub47,#sub49,#sub50" , function(event) { 
c = c + 1; 
    if (c < 51) {  
    if (b != 6 && a < 11) { 
if (a < 11) { 

a = a + 1; 

var pagedata = $('<td><textarea cols="10" rows="2" name="textarea-'+ c +'" id="textarea-1">Textarea</textarea> <input type="button" value="Submit" id="sub' + c +'"></td>');  

} 

if (a == 11) { 

    b = b + 1; 
    a = 1; 
    var newrow = $('<tr id="form' + b +'"> </tr>'); 
     newrow.appendTo("#tab"); 

    var pagedata = $('<td><textarea cols="10" rows="2" name="textarea-'+ c +'" id="textarea-1">Textarea</textarea> <input type="button" value="Submit" id="sub' + c +'"></td>');  

    } 

pagedata.appendTo("#form" + b); 

$("#form" + b).enhanceWithin(); 

    } 
    } 
})