如何在此html表中添加带有动态表值的rowspan?

时间:2017-04-28 03:19:15

标签: javascript php jquery html ajax

我有一个将let newdata = ROWDATA.map(item => { return { time: item.start_time, [item.day_of_week]: [{ class: item.room, title: { field: "lesson", text: item.lesson, class: "lesson"+item.lesson.substr(item.lesson.length-3)+"-title" } content: [{ field: "education_grade_subject", text: item.education_grade_subject, class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-subject-class" }, { field: "staff", text: item.staff, class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-staff-class" }, { field: "room", text: item.room, class:"lesson"+item.lesson.substr(item.lesson.length-3)+"-room-class" }] }], uid: item.id }; }); console.log(newdata); 附加到表格的AJAX。附加到表的tr的数量取决于返回的数据。这是我的AJAX:

tr

这是显示的表格:

success  : function(data)
{
   var tableData,t1,t2,t3,t4,t5,t6,t7;
   var no       = 1;

   $.each(data.result_brg, function(index, rows_minta) {
      t1    = "<tr><td><font size='1'>"+ no++ +"</font></td>";
      t2    =     "<td align='left'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>";
      t3    =     "<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>";
      t4    =     "<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>";
      t5    =     "<td></td>";
      t6    =     "<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>";
      t7    =     "<td></td></tr>";

      tableData += t1+t2+t3+t4+t5+t6+t7;

      $('#tbl_content tbody tr').remove();
      $('#tbl_content tbody').append(tableData);
   });

表I寻找:

No     outlet     item      stock     type       unit          invoice_no
1      outlet A   Book         45                
2      outlet A   Pen          24                
3      outlet A   Pencil       87
4      outlet A   Ruler        96
5      outlet B   Bag          57
6      outlet B   Shirt        32
7      outlet C   SSD          64

注意:第一列应为No outlet item stock type unit invoice_no 1 Book 45 2 Pen 24 outlet A 3 Pencil 87 4 Ruler 96 5 Bag 57 outlet B 6 Shirt 32 7 outlet C SSD 64 (valign = middle和text_align = center)

1 个答案:

答案 0 :(得分:1)

我更改了答案,在阵列上使用过滤器来计算与当前插座匹配的插座数量。该值在行中设置。此代码未经测试,但我认为它将接近您想要的。

    success  : function(data)
    {

        var no       = 1;
        var $tbody = $('#tbl_content tbody');
        // clear table
        $tbody.empty();
        var last = "";

        $.each(data.result_brg, function(index, rows_minta) {
            // create new row
            var $row  = $("<tr></tr>");

            // append the number td
            $row.append("<td><font size='1'>"+ no++ +"</font></td>");

            // append the outlet td if appropriate
            if(last != rows_minta.NamaOutlet){
                // use array filter on the dataset to count rows for rowspan
                var len = data.result_brg.filter(function(cur){return cur == rows_minta.NamaOutlet}).length;
                // append the ted
                $row.append(  "<td align='left' rowspan='"+len+"'><font size='1'>"+ rows_minta.NamaOutlet +"</font></td>");
                // set up for next time
                last = rows_minta.NamaOutlet;
            }
            // append the rest of the td
            $row.append("<td class='barang' style='text-align:left; vertical-align:middle'>"+ rows_minta.NamaBarang +"</td>");
            $row.append("<td class='j_minta' style='text-align:right; vertical-align:middle'>"+ rows_minta.jumlah_minta +"</td>)";
            $row.append("<td></td>");
            $row.append("<td class='satuan' style='text-align:left; vertical-align:middle'>"+ rows_minta.Satuan +"</td>");
            $("<td></td>");
            // append the row to the body
            $tbody.append($row);
        });
    }