如何製作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>並獲得每個值。

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

嘗試像每個tr這.create array，然後用主陣列

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