码迷,mamicode.com
首页 > Web开发 > 详细

jquery 实现表格

时间:2018-11-15 10:22:20      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:功能   dde   after   div   remove   []   length   tab   big   

//功能数据表格
$(‘#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;

}

jquery 实现表格

标签:功能   dde   after   div   remove   []   length   tab   big   

原文地址:https://www.cnblogs.com/xuetiedan/p/9961636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!