Question

这是我的DOM：

...
<table>
  <tbody>
    <tr>
        <td>1</td>
        <td><img src="../first"></td>
        <td>John</td>
    <\tr>
    <tr>
        <td>2</td>
        <td><img src="../second"></td>
        <td>Peter</td>
    <\tr>
  </tbody>
</table>
...

现在我想创建这个数组：（将它传递给服务器端并对其进行.CSV导出）

var arr = array();
arr = array(array(1,'../first','John'),array(2,'../second','Peter'));

如何从DOM创建上面的数组？

注意：我使用jquery，因此我可以使用以下内容获取src属性：

$('img').attr('src');

Answer 1

尚未测试过。基本上，您需要遍历所有<tr>并获取每个值。

BTW，array应为Array。

var arr = Array();
$('table tr').each(function(index) {
    var id = $(this).children()[0].innerText;
    var imageSrc = $(this).find('img').attr('src');
    var name = $(this).children()[2].innerText;
    arr.push_back(Array(id, imageSrc, name));
});

Answer 2

尝试这样。每个array创建tr，然后使用主数组推送

＆＃13;

var res = []

var a = $('tbody tr')
a.each(function(a, b) {
  a = [];
  a[0] = $(this).children('td').eq(0).text();
  a[1] = $(this).children('td').eq(1).children('img').attr('src');
  a[2] = $(this).children('td').eq(2).text();
  res.push(a);
})
console.log(res)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td><img src="../first"></td>
      <td>John</td>
      <tr>
        <tr>
          <td>2</td>
          <td><img src="../second"></td>
          <td>Peter</td>
          <\tr>
  <\tbody>
<\table>

＆＃13;

Answer 3

您可以使用map()和get()返回数组。

＆＃13;

var array = $('tr').map(function() {
  return [$(this).find('td').map(function(i) {
    return i == 1 ? $(this).find('img').attr('src') : $(this).text()
  }).get()]
}).get()

console.log(array)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td><img src="../first"></td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="../second"></td>
      <td>Peter</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

首先，向id添加table，以确保您不会意外地将其他table的行发送到服务器：

<table id="request-rows">
  <tbody>
    <tr>
        <td>1</td>
        <td><img src="../first"></td>
        <td>John</td>
    <\tr>
    <tr>
        <td>2</td>
        <td><img src="../second"></td>
        <td>Peter</td>
    <\tr>
  </tbody>
</table>

然后像这样构建你的数组：

var arr = [];
$("#request-rows tr").each(function() {
    var tds = $(this).find("td");
    var newElement = [$(td[0]).text(), $(td[1]).find("img").attr("src")];
    arr.push(newElement);
});
//Do something with arr

如何创建HTML表的数组？

4 个答案: