使用數據屬性和JavaScript在表中選擇和更改輸入值

Question

我有一個帶有輸入字段的表，我想用一些數據填充此字段，用戶可以根據需要進行更改。

 //Server side processing gives me an array like: var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); //The data array may not have data for all the rows, and the order of items may not be the same. //For each data item, I select the appropriate row: for (var i = 0; i < data.length; i++) { var myRow = $('[data-calcname="' + data.calcname + '"]')[0]; //And now, try to select the input in each row, but I can't get it to work..: //var myInput = myRow.find("input:text") } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-calcname="calc1"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> <tr data-calcname="calc2"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> </table> 

但是，如代碼段所示，我很難選擇各種輸入字段來填寫它們。

我想有一個簡單的jQuery語法可以做到這一點，但是盡管我盡了最大努力，但我還是找不到它。

我該如何實現？

Answer 1

 //Server side processing gives me an array like: var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); //The data array may not have data for all the rows, and the order of items may not be the same. //For each data item, I select the appropriate row: for (var i = 0; i < data.length; i++) { var myRow = $('[data-calcname="' + data[i].calcname + '"]').find("input").val(data[i].value); //And now, try to select the input in each row, but I can't get it to work..: //var myInput = myRow.find("input:text") } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-calcname="calc1"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> <tr data-calcname="calc2"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> </table> 

1. 使用屬性選擇器選擇td。 通過與data[i].calcname以獲得所需的內容，與.find()以獲取輸入內容。
2. 使用.val()設置值

Answer 2

您需要像這樣編寫tr選擇器var myRow = $('tr[data-calcname="' + data[i].calcname + '"]')

在您的情況下， data[i]為：
data[0] =（ {"calcname" : "calc1", "value" : 5} ）
data[1] =（ {"calcname" : "calc2", "value" : 10} ）

 //Server side processing gives me an array like: var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); //The data array may not have data for all the rows, and the order of items may not be the same. //For each data item, I select the appropriate row: for (var i = 0; i < data.length; i++) { var myRow = $('tr[data-calcname="' + data[i].calcname + '"]'); var myInput = myRow.find("input:text").val(data[i].value); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-calcname="calc1"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> <tr data-calcname="calc2"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> </table> 

Answer 3

由於data是一個數組，即data[i] ，所以使用索引來訪問元素，因此也不需要使用[0]來返回對DOM元素的引用。

 var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); for (var i = 0; i < data.length; i++) { var myRow = $('[data-calcname="' + data[i].calcname + '"]'); var myInput = myRow.find("input:text"); myInput.val(data[i].value) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-calcname="calc1"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> <tr data-calcname="calc2"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> </table> 

Answer 4

1. 您正確設置了一個for循環，但是現在您需要使用索引i來訪問數組data的所需元素： data[i].calcname
2. 您不需要獲取該行，但是需要獲取該行內的輸入： $('[data-calcname="' + data[i].calcname + '"] td input')
3. 您可以通過設置文本字段的value屬性來更改其標題： myInput.value = "new value"

 //Server side processing gives me an array like: var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); //The data array may not have data for all the rows, and the order of items may not be the same. //For each data item, I select the appropriate row: for (var i = 0; i < data.length; i++) { var myInput = $('[data-calcname="' + data[i].calcname + '"] td input')[0]; myInput.value = data[i].value } 

for of循環

如果您不了解第1步。也許使用for循環更簡單：

for (let element of data) {
  var myInput = $('[data-calcname="' + element.calcname + '"] td input')[0];
  myInput.value = element.value
}

Answer 5

您可以通過一種更簡潔的方法，使用Array.prototype.forEach（）遍歷data數組，並對每個數組el元素執行一次提供的函數。

剩下的就是jQuery。

碼：

 //Server side processing gives me an array like: var data = []; data.push({"calcname" : "calc1", "value" : 5}); data.push({"calcname" : "calc2", "value" : 10}); data.forEach(function(el) { $('tr[data-calcname="' + el.calcname + '"]').find('input:text').val(el.value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr data-calcname="calc1"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> <tr data-calcname="calc2"> <td> SomeName </td> <td> SomeDescription </td> <td> <input type="text"> </td> </tr> </table>