如何檢查表格的每一行，選擇 select 的值，而不是獲取所有可用的選項和文本輸入值

Question

JSFidle DEMO

我已經實現了以下 jQuery function：

$( "#btn-ts-today-save" ).click(function() {
  $("#tm-todays-entries-table tr").each(function () {
    var self = $(this);    
    var col_1_value = self.find("td:eq(0)").text().trim(); //I want the selected value, not all the values
    var col_2_value = self.find("td:eq(1)").text().trim(); //I want the selected value, not all the values
    var col_3_value = self.find("td:eq(2)").text().trim();
    var col_4_value = self.find("td:eq(3)").text().trim(); //I want the selected value, not all the values
    var col_5_value = self.find("td:eq(4)").text().trim();
    var col_6_value = self.find("td:eq(5)").text().trim(); //I want the selected value, not all the values
    var col_7_value = self.find("td:eq(6)").text().trim(); //I want the selected value, not all the values
    var col_8_value = self.find("td:eq(7)").text().trim(); //I want the selected value, not all the values
    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value + col_5_value + " - " + col_6_value + " - " + col_7_value + " - " + col_8_value;
    console.log(result);
  });
});
});

基本上我所做的是遍歷整個表格並打印每個單元格的內容，但這不是我想要的，因為現在我返回每個 select 的所有選項，我只想知道“選定”選項 - 不是全部-。 另外我想獲取用戶在輸入文本框中引入的值，但它不起作用。

有人可以幫我找到最佳解決方案嗎？

Answer 1

您在代碼上犯了一些錯誤：（從輸入文本中捕獲數據與從選項中捕獲數據的方法不同）

 $( "#btn-ts-today-save" ).click(function() {
    $("#tm-todays-entries-table tbody tr").each(function () {
        var self = $(this);    
        var col_1_value = self.find("td:eq(0) select option:selected").text().trim(); 
        var col_2_value = self.find("td:eq(1) select option:selected").text().trim(); 
        var col_3_value = self.find("td:eq(2) input[type='text']").val().trim(); 
        var col_4_value = self.find("td:eq(3) select option:selected").text().trim(); 
        var col_5_value = self.find("td:eq(4) input[type='text']").val().trim();
        var col_6_value = self.find("td:eq(5) select option:selected").text().trim(); 
        var col_7_value = self.find("td:eq(6) select option:selected").text().trim(); 
        var col_8_value = self.find("td:eq(7) select option:selected").text().trim(); 
        var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value + col_5_value + " - " + col_6_value + " - " + col_7_value + " - " + col_8_value;
        console.log(result);
    });
  });

如果您想簡化代碼並避免在 col 中使用數字：

  var result=[];
  $( "#btn-ts-today-save" ).click(function() {
    $("#tm-todays-entries-table tbody tr").each(function () {
       var options = $(this).find("select option:selected").map( (_, e) => $(e).text().trim() ).get();
       var msgs = $(this).find("input[type='text']").map( (_, e) => $(e).val().trim() ).get();
       options.splice(2, 0, msgs[0]);
       options.splice(4, 0, msgs[1]);
       result.push(options);
       console.log(options);
    });
     console.log(result);
  })