Question

我有一个像这样的表格

time   a     b    c    b
9:30        38         
9:00       
8:30  2.7        20
8:00        32   21    77
7:30             
7:00             28

我通过循环verticaly true将每个行转换为带有jquery的数组。结果看起来像这样

[{ type: a , time: 9:30 , value:  } ,
 { type: a , time: 9:00 , value:  } ,
 { type: a , time: 8:30 , value: 2.7 } ,
 { type: a , time: 8:00 , value:  } ,
 { type: a , time: 7:30 , value:  } ,
 { type: a , time: 7:00 , value:  } ,
 { type: b , time: 9:30 , value: 38 } ,
 ...
]

我遇到的问题是，如果当前列中有一个值，我需要将空值转换为第一个非空值。例如，输出需要是：

[{ type: a , time: 9:30 , value: 2.7 } ,
 { type: a , time: 9:00 , value: 2.7 } ,
 { type: a , time: 8:30 , value: 2.7 } ,
 { type: a , time: 8:00 , value: n/a } ,
 { type: a , time: 7:30 , value: n/a } ,
 { type: a , time: 7:00 , value: n/a } ,
 { type: b , time: 9:30 , value: 38 } ,
 { type: b , time: 9:00 , value: 32 } ,
 ...
]

我正在努力用jquery / javascript实现这一目标。这是我到目前为止的小提琴：https://jsfiddle.net/L9bd8pad/

Answer 1

从底部到顶部向后循环列，并从下面的单元格中保存非空值。然后，遇到空单元格时，将值设置为先前的非空值。这在下面说明：

//Only do the following when the document loads:
$(function() {
    //converting colspan="2" to two <td></td>
    $('tr').each(function () {
        $(this).find('td').each(function () {
            if ($(this).attr('colspan')) {
                $("<td></td><td></td>").insertBefore($(this));
                $(this).closest("td").remove();
            };
        });
    });

    //var for knowing how many times we need to loop
    countTD = $(".data-table tr:eq(1)").children('td').length;

    arTX = [];

    for (i = 1; i < countTD; i++) {

        //var for knowing first td
        countDate = i - 1;

        //Store the value of the last cell we visited:
        var lastValue = null;
        //This is the array we are going to concatenate arTX with:
        var newArr = [];

        //looping true each cell vertically backwards, from bottom to top 
        $($('.data-table tbody tr').get().reverse()).each(function () {
            $(this).find('td:eq(' + i + ')').each(function () {

                value = $(this).text();
                date = $(this).prevAll(":eq(" + countDate + ")").text();
                type = $('.data-table thead tr:eq(0)').find('th:eq(' + i + ')').text();
                //If we do not have a valid value but lastValue is valid, set valid to lastValue so we can use the value from a previous cell of the same type.
                if (!value && lastValue) value = lastValue;
                //Otherwise, value must be valid, so set lastValue to value.
                else lastValue = value;

                //Push this cell into newArr:
                newArr.push({
                            "value": "" + value + "",
                            "date": "" + date + "",
                            "type": "" + type + ""
                        });

            });

        });
        //Since we traversed the above cells backwards, reverse newArr and then concatenate it with arTX:
        arTX = arTX.concat(newArr.reverse());
    }
    console.log(arTX);
});

body {
    font-size: 10px;
}
td {
    padding: 10px;
    border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="data-table">
    <thead>
        <tr>
            <th>Datum</th>
            <th>a</th>
            <th>b</th>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10:00</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>            
        </tr>
        <tr>
            <td>9:30</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>9:00</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>8:30</td>
            <td>2.7</td>
            <td>38.6</td>
            <td>2.1</td>
            <td>37.9</td>
            <td>1.7</td>
            <td>37.9</td>
        </tr>
        <tr>
            <td>8:00</td>
            <td></td>
            <td>38.9</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>7:30</td>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>

从当前tr开始寻找第一个非空td

1 个答案: