jquery 实现表格

Posted 2021-01-20 薛铁蛋

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

}