jquery 实现表格
//功能数据表格
$('#btn').click(function(){
var category_id=$("#category_id").find("option:selected").text();
var name = $("#name").val();
var nian = $("#weizhi1").val();
var yue = $("#weizhi2").val();
var ri = $("#weizhi3").val();
var date=nian+"-"+yue+"-"+ri;
var name_sub = $("#name_sub").val();
var item_num = $("#item_num").val();
/*var arr=$('.bigimg');
var length=arr.length;
var url='';
for(var i=0;i<length;i++){
url+="<img src='"+arr[i].src+"' id='tab_bigimg'>";
}*/
var arr=$('#hidden_img').val();
var url='';
url+="<img src='"+arr+"' id='tab_bigimg'>";
$(".btr").remove();
var page_num = $("#page_num").val();
var content = $("#content").val();
var Div = document.getElementById('myTable');
Div.style.cssText = 'width:100%;display:block;';
var tableHtml ="";
tableHtml += "<tr id='tr'>"
+"<td id='tab_category'>"+category_id+"</td>"
+"<td id='tab_name'>"+name+"</td>"
+"<td id='tab_date'>"+date+"</td>"
+"<td id='tab_sub'>"+name_sub+"</td>"
+"<td id='tab_item'>"+item_num+"</td>"
+"<td id='tab_page'>"+page_num+"</td>"
+'<td id="tab_img">'+url+'</td>'
+"<td id='tab_content'>"+content+"</td>"
+"</tr>";
$("#firTr").after(tableHtml);
});
//获取表格中的数据
$('#sbtn').click(function(){
var result=get_table_data();
$("#data").val(JSON.stringify(result));
$("#form").submit();
});
//获取表格中的数据
function get_table_data(){
var tr=$("#myTable tr");
var result=[];
var length=tr.length;
for(var i=0;i<length;i++){
var tds=$(tr[i]).find("td");
var count=tds.length;
if(count>0){
result.push({'category_id':$("#category_id").val(),'name':$(tds[1]).html(),'date':$(tds[2]).html(),
'name_sub':$(tds[3]).html(),'item_num':$(tds[4]).html(),'page_num':$(tds[5]).html(),'enclo':$(tds[6]).find("img")[0].src,
'content':$(tds[7]).html()});
}
}
return result;
}
用技术征服世界