pomeKRANK pomeKRANK - 4 days ago 5
Javascript Question

Cannot export table select option

I want to store an editable table into a array. I proceed by looping over every row, which works fine when it's only text. The problem comes when it's a select option, which returns all options instead of the one selected. The code looks like that



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

I have made some changes in your code replace these lines of code inside the $BTN.click function. Hope it works.

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

        });
Comments