提交動態表格輸入

Question

我想在我的網站上存儲表格數據。該表有n行，每行有m列（它是一個動態表）。每個單元格都有一個輸入。所以我們有n * m輸入。

如何以JSON格式存儲數據？

Example: 
|------------------|------------------|------------------| 
| {row-1,column-1} | {row-1,column-2} | {row-1,column-3} | 
|------------------|------------------|------------------| 
| {row-2,column-1} | {row-2,column-2} | {row-2,column-3} | 
|------------------|------------------|------------------| 
| {row-3,column-1} | {row-3,column-2} | {row-3,column-3} | 
|------------------|------------------|------------------| 
| {row-4,column-1} | {row-4,column-2} | {row-4,column-3} | 
|------------------|------------------|------------------| 

存儲的數據：

JSON Object: 
[ 
    [ {"row-1,column-1"},{"row-1,column-2"},{"row-1,column-3"} ], // row 1 
    [ {"row-2,column-1"},{"row-2,column-2"},{"row-2,column-3"} ], // row 2 
    [ {"row-3,column-1"},{"row-3,column-2"},{"row-3,column-3"} ], // row 3 
    [ {"row-4,column-1"},{"row-4,column-2"},{"row-4,column-3"} ] // row 4 
] 

是否有任何jQuery溶液或plugin？

Answer 1

首先得到每tr使用each，並在其中，使用另一個each()獲得行的事件td。然後將每個td的文本添加到對象。在結束時將對象轉換爲json。

var obj = []; 
 
$("table tr").each(function(index){ 
 
    obj[index] = []; 
 
    $(this).find("td").each(function(index2){ 
 
     obj[index][index2] = [$(this).text()]; 
 
    }); 
 
}); 
 
var json = JSON.stringify(obj); 
 
console.log(json);

table, tr, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>Row1-Column1</td> 
 
     <td>Row1-Column2</td> 
 
     <td>Row1-Column3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row2-Column1</td> 
 
     <td>Row2-Column2</td> 
 
     <td>Row2-Column3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Row3-Column1</td> 
 
     <td>Row3-Column2</td> 
 
     <td>Row3-Column3</td> 
 
    </tr> 
 
</table>