2016-09-20 25 views
0

我有一張表,我從中獲取值並將其存儲在2D數組中,然後我將這個2D數組轉置並將其存儲爲另一個數組,稱爲輸出 Array ,現在我必須在以前使用的表格的td中分配這些值。 下面是代碼:使用jQuery將2D數組值分配給HTML表

$(document).ready(function(){ 
 
\t var rows = []; 
 
\t var output = []; 
 
\t $("#btnTranspose").on("click",function(){ 
 
\t \t $("tr").each(function(){ 
 
\t \t \t var columns = []; 
 
\t \t \t $(this).find("td").each(function(){ 
 
\t \t \t \t columns.push($(this).text()); 
 
\t \t \t }); 
 
\t \t \t rows.push(columns); 
 
\t \t }); 
 
\t \t for(var i = 0; i < rows.length; i++){ 
 
\t \t \t output[i] = []; 
 
\t \t \t for(var j = 0; j < rows[i].length; j++){ 
 
\t \t \t \t output[i][j] = rows[j][i]; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t $("tr").each(function(){ 
 
\t \t \t $(this).find("td").each(function(){ 
 
\t \t \t \t for(var k = 0; k < output.length; k++){ 
 
        for(var l = 0; l < output[k].length; l++){ 
 
        $(this).text(output[k][l]); 
 
        }     
 
       } 
 
\t \t \t }); 
 
\t \t }); 
 
\t }); 
 
});
body{ 
 

 
} 
 
table{ 
 
\t border: 1px solid black; 
 
} 
 
td{ 
 
\t border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Transpose Using jQuery</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
\t <table id="matrix"> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>1</td> 
 
\t \t \t \t <td>2</td> 
 
\t \t \t \t <td>3</td> 
 
\t \t \t \t <td>4</td> 
 
\t \t \t \t <td>5</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>6</td> 
 
\t \t \t \t <td>7</td> 
 
\t \t \t \t <td>8</td> 
 
\t \t \t \t <td>9</td> 
 
\t \t \t \t <td>10</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>11</td> 
 
\t \t \t \t <td>12</td> 
 
\t \t \t \t <td>13</td> 
 
\t \t \t \t <td>14</td> 
 
\t \t \t \t <td>15</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>16</td> 
 
\t \t \t \t <td>17</td> 
 
\t \t \t \t <td>18</td> 
 
\t \t \t \t <td>19</td> 
 
\t \t \t \t <td>20</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>21</td> 
 
\t \t \t \t <td>22</td> 
 
\t \t \t \t <td>23</td> 
 
\t \t \t \t <td>24</td> 
 
\t \t \t \t <td>25</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
\t <input type="button" value="Transpose!" id="btnTranspose"> 
 
\t <table id="outputTable"> 
 
\t \t 
 
\t </table> 
 
\t 
 
\t <script type="text/javascript" src="jquery.min.js"></script> 
 
\t <script type="text/javascript" src="script.js"></script> 
 
</body> 
 
</html>

問題是:用於每個TD運行並輸出陣列被分配給每個TD的元素,但是,我要分配的一個元件輸出陣列到一次一個td。我怎麼做?

回答

0

each()回調爲您提供該實例的索引。所以當你迭代行時,你已經知道外部數組索引。然後,當你重複你的細胞具有細胞指數

嘗試

$("tr").each(function(rowIndex) { 
    var rowData = output[rowIndex]; 
    $(this).find("td").each(function(cellIndex) { 
    $(this).text(rowData[cellIndex]); 
    }); 
});