Question

我有一个HTML页面及其关联的js文件。目的是将插入表中的数据转换为JSON文件。用户可以编辑表格单元格，然后单击按钮，以便Javascript文件解析数据并将其作为Ajax请求发送到服务器上的PHP文件。然后，PHP文件将数据作为文件存储在服务器上，并将链接发回。对于标记，我需要使用val（）而不是text（）来获取所选值。但是，val（）返回一个空字符串。如何使其正确返回值？

layout_weight

TextView

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

Answer 1

给出以下jQuery方法：

.val()方法主要用于获取input，select和textarea等表单元素的值。

.text()方法的结果是一个字符串，其中包含所有匹配元素的组合文本。

对于每个表单元格，似乎要返回子项val()的{{1}}（如果存在），否则要返回<select>的{{1}}。

使用JavaScript的logical OR operator，我们可以根据存在的内容选择text()或<td>：

逻辑或（||）
  expr1 || expr2
  如果可以将其转换为true，则返回expr1；否则，返回false。否则，返回expr2。

赞：

text()

这是一个例子：

val()

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

Answer 2

您的算法（$ td.eq（i））的首次返回是

<td contenteditable="true"> 
    <select> 
        <option value="pharmacist">Pharmacist</option>
        <option value="doctor">Doctor</option>
    </select>
</td>

和<td contenteditable="true">的属性值不存在，因此在共振中您具有空值

第二个值是

<td contenteditable="true">stir-fry</td>

相同的属性值，所以也返回null

只需使用.text（）就可以了。因为.text（）将仅获得标记中的文本

我希望我能帮助并理解我说的话...

仅当</select>标记出现时，如何获取内部的<select>值？

2 个答案: