如何制作HTML表数组？

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>并获取每个值。

顺便说一句， 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

尝试这样。每个tr .create array ，然后推入main数组

 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) 

 <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> 

Answer 3

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

 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) 

 <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> 

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