Question

我想将可编辑的表存储到数组中。我继续循环遍历每一行，当它只是文本时工作正常。问题来自于它是一个选择选项，它返回所有选项而不是所选选项。代码看起来像那样

＆＃13;

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
  $(this).parents('tr').detach();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];
  
  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });
  
  // Turn all existing rows into a loopable array
  var h = [];
    $rows.each(function (idx, value) {
    h[idx] = [];
    var pp = [];
    var $td = $(this).find('td');

    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      pp[i] = $td.eq(i).text();   
    });
    h[idx] = pp;
    
  });
  console.log(h)
});

＆＃13;

  
[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block; /* For Firefox */
}


.table-editable {
  position: relative;
}

.table-remove {
  color: #700;
  cursor: pointer;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}

.table-add {
  color: #070;
  cursor: pointer; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


 <div class="container">
  <h1>HTML5 Editable Table</h1>
  
  <div id="table" class="table-editable">
    <span class="table-add">ADD</span>
    <table class="table">
      <tr>
        <th>Name</th>
        <th>Ref</th>
        <th>Format</th>
        <th>Lang</th>
        <th></th>
        <th></th>
      </tr>

      <!-- This is our clonable table line -->
      <tr class="hide">
        <td contenteditable="true" placeholder="Click to edit"></td>
        <td contenteditable="true" placeholder="Click to edit"></td>
        <td contenteditable="true" name = "format">
          <select name = "formatList">
            <option>Web page</option>
            <option>Video</option>
            <option>Book</option>
            <option>Other</option>
          </select>
        </td>
        <td contenteditable="true">undefined</td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove">DEL</span>
        </td>
        <td>
          <span class="table-up glyphicon glyphicon-arrow-up">UP</span>
          <span class="table-down glyphicon glyphicon-arrow-down">DOWN</span>
        </td>
      </tr>

    </table>
  </div>
  
  <button id="export-btn" class="btn btn-primary">Save</button>
  <p id="export"></p>
</div>

＆＃13;

Answer 1

我在代码中做了一些更改，在$ BTN.click函数中替换了这些代码行。希望它有效。

        // Use the headers from earlier to name our hash keys
        headers.forEach(function (header, i) {
            if ($td.eq(i).has('select').length>0)
            { pp[i] = $td.eq(i).find('select').val(); }
            else { pp[i] = $td.eq(i).text(); }

        });

无法导出表选择选项

1 个答案: