如何獲得價值 <select>內<td>除非<select>標簽禮物？
[英]How to get the value of <select> inside <td> only if <select> tag presents?
問題描述
我有一個HTML頁面及其關聯的js文件。 目的是將插入表中的數據轉換為JSON文件。 用戶可以編輯表格單元格，然后單擊按鈕，以便Javascript文件解析數據並將其作為Ajax請求發送到服務器上的PHP文件。 然后，PHP文件將數據作為文件存儲在服務器上，並將鏈接發回。 對於標記，我需要使用val（）而不是text（）來獲取所選值。 但是，val（）返回一個空字符串。 如何使其正確返回值？
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 () { //alert("ok"); 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 $rows.each(function () { var $td = $(this).find('td'); var h = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { h[header] = $td.eq(i).val(); alert($td.eq(i).val()); }); data.push(h); }); // Output the result normaldata = JSON.stringify(data); $.ajax({ type: "POST", url: "filemaker.php", data: {"data":normaldata}, success: function(output) { var a = document.createElement('a'); a.href = 'data.gmp' a.download = "data.gmp"; a.click(); //alert("reached here"); } }); });
.table-editable { position: relative; } .table-editable .glyphicon { font-size: 20px; } .table-remove { color: #700; cursor: pointer; } .table-remove:hover { color: #f00; } .table-up, .table-down { color: #007; cursor: pointer; } .table-up:hover, .table-down:hover { color: #00f; } .table-add { color: #070; cursor: pointer; position: absolute; top: 8px; right: 0; } .table-add:hover { color: #0b0; }
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5 Editable Table</title> <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <a href='text.html' >aa</a> <div class="container"> <h1>HTML5 Editable Table</h1> <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p> <ul> <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> <li>Simple / powerful features such as add row, remove row, move row up/down.</li> </ul> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <tr> <th>Type</th> <th>Doctor</th> <th>Specialization</th> <th>City</th> <th>Area</th> <th>Rank</th> <th></th> <th></th> </tr> <tr> <td contenteditable="true"> <select> <option value='pharmacist'>Pharmacist</option> <option value='doctor'>Doctor</option> </select> </td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true"> <select> <option value='A+'>A+</option> <option value='A'>A</option> <option value='B'>B</option> <option value='C'>C</option> </select> </td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> </tr> <!-- This is our clonable table line --> <tr class="hide"> <td contenteditable="true"> <select> <option value='pharmacist'>Pharmacist</option> <option value='doctor'>Doctor</option> </select> </td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true"> <select> <option value='A+'>A+</option> <option value='A'>A</option> <option value='B'>B</option> <option value='C'>C</option> </select> </td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> </tr> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <p id="export"></p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script> <script src="js/index.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2018-10-02 18:24:39
給定以下jQuery方法：
.val()方法主要用於獲取表單元素的值，例如input，select和textarea。
.text()方法的結果是一個字符串，其中包含所有匹配元素的組合文本。
對於每個表單元格，似乎都想返回子<select>的val() ，如果存在則返回它，而<td>的text()則返回。
使用JavaScript的邏輯OR運算符 ，我們可以根據存在的一種來選擇text()或val() ：
邏輯或（||）
expr1 || 表達式2
如果可以將其轉換為true，則返回expr1；否則，返回false。 否則，返回expr2。
像這樣：
$select.val() || $td.text()
這是一個例子：
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() { //alert("ok"); 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 $rows.each(function() { var $tds = $(this).find('td'); var h = {}; // Use the headers from earlier to name our hash keys headers.forEach(function(header, i) { var $td = $tds.eq(i); var $select = $td.find('select'); h[header] = $select.val() || $td.text(); console.log(h[header]); }); }); });
.table-editable { position: relative; } .table-editable .glyphicon { font-size: 20px; } .table-remove { color: #700; cursor: pointer; } .table-remove:hover { color: #f00; } .table-up, .table-down { color: #007; cursor: pointer; } .table-up:hover, .table-down:hover { color: #00f; } .table-add { color: #070; cursor: pointer; position: absolute; top: 8px; right: 0; } .table-add:hover { color: #0b0; }
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <tr> <th>Type</th> <th>Doctor</th> <th>Specialization</th> <th>City</th> <th>Area</th> <th>Rank</th> <th></th> <th></th> </tr> <tr> <td contenteditable="true"> <select> <option value='pharmacist'>Pharmacist</option> <option value='doctor'>Doctor</option> </select> </td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true"> <select> <option value='A+'>A+</option> <option value='A'>A</option> <option value='B'>B</option> <option value='C'>C</option> </select> </td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> </tr> <!-- This is our clonable table line --> <tr class="hide"> <td contenteditable="true"> <select> <option value='pharmacist'>Pharmacist</option> <option value='doctor'>Doctor</option> </select> </td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true">stir-fry</td> <td contenteditable="true"> <select> <option value='A+'>A+</option> <option value='A'>A</option> <option value='B'>B</option> <option value='C'>C</option> </select> </td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> </tr> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <p id="export"></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>
解決方案2
0 2018-10-02 18:36:02
您的算法（$ td.eq（i））的首次返回是
<td contenteditable="true">
<select>
<option value="pharmacist">Pharmacist</option>
<option value="doctor">Doctor</option>
</select>
</td>
並且<td contenteditable="true">沒有屬性值，因此reson您具有空值
第二個值是
<td contenteditable="true">stir-fry</td>
它沒有屬性值，因此也返回null
只需使用.text（）就可以了。 因為.text（）將僅獲得標記中的文本
我希望我能幫助並理解我說的話...
獲取表中td內的select標簽的select選項值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.