僅針對更改的行從表中獲取靜態數據和選定數據

Question

我正在嘗試同時做多件事，並且似乎無法讓所有事情一起工作。 我有一個充滿選擇框的表格，這些選擇框從 php foreach 循環動態填充。 用戶進行更改並單擊按鈕，我試圖遍歷表並僅抓取已更改的行並獲取選定的數據值。 這是我的表的樣子：

<table id="myTable>
 <tbody>
   <tr>
     <th>ColumnHeader1</th>
     <th>ColumnHeader2</th>
     <th>ColumnHeader3</th>
   </tr>
   <tr>
      <td name="columnOneData">123456</td>
      <td name="columnTwoData">
         <select>
            <option value="1">Data1</option>
            <option value="2">Data2</option>
            <option value="3">Data3</option>
         </select>
      </td>
      <td name="columnThreeData>
         <select>
            <option value="1">Data1</option>
            <option value="2">Data2</option>
            <option value="3">Data3</option>
         </select>
      </td>
   </tr>
   <tr>
      <td name="columnOneData">987654</td>
      <td name="columnTwoData">
         <select>
            <option value="1">Data1</option>
            <option value="2">Data2</option>
            <option value="3">Data3</option>
         </select>
      </td>
      <td name="columnThreeData>
         <select>
            <option value="1">Data1</option>
            <option value="2">Data2</option>
            <option value="3">Data3</option>
         </select>
      </td>
   </tr>
 </tbody>
</table>
<button id="saveBtn"></button>

我有一個函數設置為將類“changedRow”添加到任何已更改的 tr 中。 通過使用它，我只能獲得更改的行，但似乎我只能獲得選定的值（但我缺少 columnOneData）或者我可以獲得所有值（但包括所有選項，而不僅僅是選擇的選項）但有無法將其縮小到我需要的范圍。 最后，我需要將 columnOneData 和 columnTwoData 和 columnThreeData 的選定值發送回我的 php 代碼以更新數據庫。 （例如，如果用戶對兩行都進行了選擇）

 "columnOneData":123456, "columnTwoData":1, "columnThreeData":2
 "columnOneData":987654, "columnTwoData":2, "columnThreeData":3 

任何有關解決此問題的最佳方法的建議將不勝感激！！

Answer 1

首先，我建議您提供不起作用的js代碼，以便其他人更容易回答您，因為他們可以修改您的代碼。

無論如何，請嘗試以下代碼：

var all_data = [];
$('#myTable tr.changedRow').each(function() {
    all_data.push({
        columnOneData: $(this).find('td[name="columnOneData"]').text(),
        columnTwoData: $(this).find('td[name="columnTwoData"] select').val(),
        columnThreeData: $(this).find('td[name="columnThreeData"] select').val()
    });
});

jsfiddle 中的工作示例

Answer 2

首先，您的姓名和 ID 屬性缺少一些引號。

<table id="myTable>
...
<td name="columnThreeData>

...應該...

<table id="myTable">
...
<td name="columnThreeData">

（我會使用類或 ID 而不是名稱。）

至於獲取值，我不能 100% 確定您遇到的問題是什么，但這是我第一次嘗試做我認為您要求做的事情：

小提琴： https : //jsfiddle.net/c3nm0wvq/