2016-09-20 48 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]); 
    }); 
});