使用data-attribute和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]，使用index来访问元素，也不需要使用[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. 您可以通过设置其值属性来更改文本字段的标题：myInput.value = "new value"
＆＃13;
＆＃13;
//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
}
＆＃13;
＆＃13;
＆＃13;

for of循环

如果您不理解第1步。也许使用for 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>