найти первый не пустой тд, начиная с текущего тр

Question

у меня есть Tabel как этот

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  

я уверен, преобразование этого в массив с помощью цикла JQuery verticaly верно каждую строку. результат выглядит следующим образом

[{ 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>