如何循環的輸入框動態生成的列表，並生成JSON

我有下面的代碼，但是代碼沒有踏在第二。每個（TD INPUT）如何循環的輸入框動態生成的列表，並生成JSON

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
</head> 

<body> 
    <script> 
    arrayToTable = function(data, options = {}) { 
    var table = $('<table />'), 
     thead, 
     tfoot, 
     rows = [], 
     row, 
     i, j, 
     defaults = { 
     th: true, // should we use th elemenst for the first row 
     thead: false, //should we incldue a thead element with the first row 
     tfoot: false, // should we include a tfoot element with the last row 
     attrs: {} // attributes for the table element, can be used to 
     } 

    options = $.extend(defaults, options); 

    table.attr(options.attrs) 

    // loop through all the rows, we will deal with tfoot and thead later 
    for (i = 0; i < data.length; i++) { 
     row = $('<tr />'); 
     for (j = 0; j < data[i].length; j++) { 
     if (i == 0 && options.th) { 
      row.append($('<th />').html(data[i][j])); 
     } else { 
      row.append($('<td />').html("<input type='text' name='fname'>")); 
     } 
     } 
     rows.push(row); 
    } 

    // if we want a thead use shift to get it 
    if (options.thead) { 
     thead = rows.shift(); 
     thead = $('<thead />').append(thead); 
     table.append(thead); 
    } 

    // if we want a tfoot then pop it off for later use 
    if (options.tfoot) { 
     tfoot = rows.pop(); 
    } 

    // add all the rows 
    for (i = 0; i < rows.length; i++) { 
     table.append(rows[i]); 
    }; 

    // and finally add the footer if needed 
    if (options.tfoot) { 
     tfoot = $('<tfoot />').append(tfoot); 
     table.append(tfoot); 
    } 
    return table; 
    } 

    var data = [ 
    ['Name', 'Age', 'Email'] 
    ]; 

    var table = arrayToTable(data, { 
    thead: true, 
    attrs: { 
     class: 'table' 
    } 
    }) 

    $('body').append(table); 
    </script> 

    <button class="add-row">Add row</button> 
    <button class="read-row">Read data</button> 
    <button class="buildjson-row">BuildJson</button> 
    <script> 
    $('.add-row').on('click', function() { 
    sb = "<tr>"; 
    for (var i = 0; i < 1; i++) { 
     for (var j = 0; j < data[i].length; j++) { 
     sb = sb + "<td><input type='text' id='" + j + '"_"' + data[i][j] + "'></td>"; 
     } 
    } 
    sb = sb + "</tr>"; 
    $('.table').append(sb); 
    }); 
    $(".read-row").on('click', function() { 
    $('input').each(function(index, data) { 
     var value = $(this).val(); 
     alert(value); 
    }); 
    return false; 
    }); 

    $(".buildjson-row").on('click', function() { 
    jsonObj = []; 
    $('tr').each(function(index, data) { 
     item = {} 
     $(this).find('td input').each(function(index, data) { 
     var id = $(this).attr('id'); 
     var value = $(this).val(); 
     nombrecolumna = id.split('_')[1]; 
     item[nombrecolumna] = value; 
     }); 
     jsonObj.push(item); 
    }); 
    alert(jsonObj); 
    return false; 
    }); 
    </script> 
</body> 

</html>

來源

2016-06-21 Luis Valencia

查看buildjson-row –

做這樣的事情在我看來並不是最好的。像角這樣的東西存在，所以你不像這樣在JS中構建HTML。 – bryan60

我知道，這個應用程序是不是角，所以我不會從頭開始 –

我不知道我的理解你的問題正確，但我將開始修復你創建輸入元素標識符的方式。您有：

sb = sb + "<td><input type='text' id='" + j + '"_"' + data[i][j] + "'></td>";

我會考慮將它簡單

sb = sb + "<td><input type='text' id='"'+ j + '_' + data[i][j] + "'></td>";

所以標識符將看：

original: "1"_"Name" 
proposed: "1_Name"

考慮並不是所有的瀏覽器（HTML客戶端）將處理多「

希望它能幫到你

來源

2016-06-21 17:06:38 neojg

如何循環的輸入框動態生成的列表，並生成JSON

回答

相關問題