Question

我想用我的数组填充我的HTML表格。我尝试使用$ rowTemplate.find（'[data-id = id]'）。text（id）;

但它没有用。我使用套接字，所以我不能发布所有太混乱的代码。

我会广告我的一些代码但是如何使用两个昏暗数组的输入填充HTML表格是一个普遍的问题。

socket.on('outputData', function(data) {
      var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');
      var resultArray = data.resultArray;
      var name, location, bdate, id, anzahl = 0;
      for (var i = 0; i < resultArray.length; i++) {
        name = resultArray[i][0];
        anzahl = anzahl + 1;
					console.log(name);
					location = resultArray[i][1];
					bdate = resultArray[i][2];
					favorit = resultArray[i][3];
					id = resultArray[i][4];
						
					$rowTemplate.find('[data-id=id]').text(id);
					$rowTemplate.find('[data-id=name]').text(name);
					$rowTemplate.find('[data-id=geburtsort]').text(location);
					$rowTemplate.find('[data-id=geburtsdatum]').text(bdate);
				}
  $("#table > tbody").append(rowTemplate.html());
			});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<body>
  <table id="table">
    <tbody>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Geburtsort</th>
        <th>Geburtsdatum</th>
        <th>Favorit</th>
      </tr>
    </tbody>
  </table>

Answer 1

问题在于你的变量rowTemplate。摆脱$，它应该工作。

var rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');

rowTemplate.find("[data-id=id]").text("bcd");

在此处测试：https://jsfiddle.net/Lwmu4p6q/

但是，我不太确定为什么会这样。我认为这是因为jQuery的问题。您仍然可以使用以美元符号开头的变量，但是当您开始使用jQuery函数进行级联时，它似乎无法正常工作。

编辑：另一种方法是手动＆＃34;建立＆＃34;排。不是像rowTemplate = $('...');那样使用jQuery解析HTML，而是使用jQuery选择器操作它，你可以使用vanilla JavaScript这样做：

var outputHTML = "";
for (var i = 0; i < array.length; i++) { // i for the rows
  var newRow = "<tr>";
  for (var j = 0; j < array[i].length; j++) { // j for the colums
    newRow += "<td>" + array[i][j] + "</td>";
  }
  outputHTML += newRow + "</tr>";
}

如果可能，我建议使用let代替var。而且我认为这个版本的执行速度可能更快，但差异如果存在的话，只会与真正的大表格有关。这取决于jQuery选择器和text（）的实现方式。

编辑2：

检查https://jsfiddle.net/Lv9vdv8u/第二个版本。

如何将数组填充到HTML表格中

1 个答案: