Question

我有以下代码，但代码没有踩到第二个.each（TD INPUT）

<!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>

Answer 1

我不确定我是否正确理解了您的问题，但我将首先修复您创建输入元素标识符的方式。你有：

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客户端）都会处理多个＆＃34;名。

希望它会对你有所帮助。

如何迭代动态生成的输入框列表并生成json

1 个答案: