テーブル選択オプションをエクスポートできません

Question

編集可能なテーブルをアレイに保存します。私はすべての行をループして処理を進めますが、これはテキストだけの場合にはうまくいきます。選択されたオプションではなく、すべてのオプションを返す選択オプションのときに問題が発生します。コードは、私はあなたのコード内のいくつかの変更が$ BTN.click関数内のコード行を置き換えてきたこと

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) 
 
});

 
[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; 
 
}

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

Answer 1

のように見えます。それがうまくいくことを望みます。

 // 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(); } 

     });