Die Tabelle kann nicht exportiert werden

Question

Ich möchte eine bearbeitbare Tabelle in einem Array speichern. Ich fahre fort, indem ich jede Zeile durchlaufe, was gut funktioniert, wenn es nur Text ist. Das Problem tritt auf, wenn es sich um eine Auswahloption handelt, die alle Optionen anstelle der ausgewählten zurückgibt. Der Code sieht wie die

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

Ich habe einige Änderungen in Ihrem Code ersetzen diese Zeilen von Code innerhalb der $ BTN.click Funktion gemacht. Hoffe, es funktioniert.

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

     });