Tablo seçme seçeneği dışa aktarılamıyor

Question

Düzenlenebilir bir tabloyu bir diziye kaydetmek istiyorum. Her satırda döngü yaparak ilerliyorum, sadece metin olduğunda iyi çalışıyor. Sorun, seçili olan yerine tüm seçenekleri döndüren bir seçim seçeneği olduğunda ortaya çıkar. Kod ben kodunuzda bazı değişiklikler $ BTN.click işlevi içinde bu kod satırları yerine yapmış

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

benziyor. Umarım çalışır.

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

     });