1. 程式人生 > >不需要form,獲取table所有資料,整合為json資料 傳送給後臺

不需要form,獲取table所有資料,整合為json資料 傳送給後臺

我的表格是列表式的資料,如圖


html:這裡我要獲取表格前4列的內容,表格的內容用js調取的json資料 ,展現出來的html的程式碼是

<table>
<tbody>
<tr>
<td><input type="number" value="1"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="產品分類1" /></td>
<td><input type="file" value="選擇檔案"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="

JavaScript:;" class="delete">刪除</a>
</td>
</tr>

<tr>
<td><input type="number" value="2"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="產品分類2" /></td>
<td><input type="file" value="選擇檔案"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">刪除</a>
</td>
</tr>

<tr>
<td><input type="number" value="3"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="產品分類3" /></td>
<td><input type="file" value="選擇檔案"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">刪除</a>
</td>
</tr>

<tr>
<td><input type="number" value="4"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="產品分類4" /></td>
<td><input type="file" value="選擇檔案"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">刪除</a>
</td>
</tr>

<tr>
<td><input type="number" value="5"/></td>
<td><input type="number" id="" value="123321" /></td>
<td><input type="text" id="" value="產品分類5" /></td>
<td><input type="file" value="選擇檔案"/></td>
<td><img src="img/img.phg"/></td>
<td>
<a href="javascript:;" class="delete">刪除</a>
</td>
</tr>
</tbody>
</table>
<a href="javascript:;" id="sent_button">更新</a>


js:
首先引用jQuery檔案
<script src="js/jquery.min.js"></script>
獲取table內容的js

function getInt(){
var k;
var att = {};
//建立一個空的json
var id,number_,name,image;//定義四個變數,分別是表格中索要獲取的分類id、編號、名稱、上傳圖
var Array = [];//一個空的陣列
$('#tbody tr').each(function(){//遍歷每一個tr
var st = [];//空陣列,用於存放每一個tr裡td的值
var chil = $(this).children('td');
var tdcount = chil.length-2;
var txt;
//alert(tdcount);
for (k=0;k<tdcount;k++) {//迴圈得到td的四項內容值
txt = chil.eq(k).children('input').val();
//alert(txt)
st.push(txt);
}
id = st[0];
number_ = st[1];
name = st[2];
image = st[3]
att = {
'id':id,//分類id
'number':number_,//分類排序編號
'name':name,//分類名稱
'image':image//分類上傳圖片本地路徑
};//把每一個tr的資料寫成一個json資料
//console.log(att);
Array.push(att);//把json資料寫入陣列
})

console.log(Array);
}

用console.log();測試  得到json陣列,圖


把獲取到的json陣列傳給後臺就ok啦。


第一次寫部落格,不太會寫,希望能幫到有需要的人。有更好方案的大神們求帶飛