将动态行添加到表中

Question

我想将Array元素添加到表中。

数组元素是动态的，来自数据库。 我正在创建用于从生成的数据中添加一行并添加rowAfter以添加其他数组元素的行

这是我写的代码-

var rowSpan = 0;
var rowSpan1 = 0;
for (element in data)
{
  // get products into an array
  var productsArray = data[element].products.split(',');
  var QuantityArray = data[element].quantity.split(',');
  var ChemistArray = data[element].Retailername.split(',');
  var PobArray = data[element].Pob.split(',');

  rowSpan = productsArray.length;
  rowSpan1 = ChemistArray.length;

  var row = '<tr>' +
 '<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
 '<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';

 // loop through products array
 var rowAfter = "";

 for (var i = 0; i < rowSpan; i++) {
   if(i == 0) {
     row += '<td>' + productsArray[i] + '</td>';
     row += '<td>' + QuantityArray[i] + '</td>';
     } else {
       rowAfter += '<tr><td>' + productsArray[i] + '</td><td>' + QuantityArray[i] + '</td>';
     }
 }

 for (var k = 0; k < rowSpan1; k++) {
   if(k == 0) {
     row += '<td>' + ChemistArray[k] + '</td>';
     row += '<td>' + PobArray[k] + '</td>';
   } else {
     rowAfter += '<td>' + ChemistArray[k] + '</td><td>' + PobArray[k] + '</td> </tr>';
   }
 }

 row +=

 '<td rowspan="'+rowSpan1+'">' + data[element].locations +'</td>'+
 '<td rowspan="'+rowSpan1+'">' + data[element].area + '</td>'+
 '</tr>';

 $('#tbody').append(row+rowAfter);

因此，按照代码，我可以很好地显示ProductArray和Quantity Array

而且，但是我无法一次又一次地展示“化学家”阵列。

在上面的图像中，我想显示数据（“化学家”列下方的Kapila和Kripa），其中一些与tr和td有关。

任何帮助将不胜感激。

数据是JSON响应-

在我的情况下，ChemistArray（响应时为零售商名称）包含4个名称和POBArray 4个值。

Answer 1

您需要添加一个空的<td></td>作为“占位符”。

for (element in data) {
    var productsArray = data[element].products.split(',');
    var quantityArray = data[element].quantity.split(',');
    var chemistArray = data[element].Retailername.split(',');
    var pobArray = data[element].Pob.split(',');

    // find the largest row number
    var maxRows = Math.max(productsArray.length, quantityArray.length, chemistArray.length, pobArray.length);

    var content = '';
    var date = '<td rowspan="' + maxRows + '">' + data[element].date + '</td>';
    var doctorName = '<td rowspan="' + maxRows + '">' + data[element].doctor_name + '</td>';
    var locations = '<td rowspan="' + maxRows + '">' + data[element].locations + '</td>';
    var area = '<td rowspan="' + maxRows + '">' + data[element].area + '</td>';

    content += '<tr>' + date + doctorName;

    for (var row = 0; row < maxRows; row++) {
        // only add '<tr>' if row !== 0
        // It's because for the first row, we already have an open <tr> tag
        // from the line "content += '<tr>' + date + doctorName;"
        if (row !== 0) {
            content += '<tr>';
        }

        // the ternary operator is used to check whether there is items in the array
        // if yes, insert the value between the <td></td> tag
        // if not, just add an empty <td></td> to the content as a placeholder
        content += '<td>' + (productsArray[row] ? productsArray[row] : '') + '</td>';
        content += '<td>' + (quantityArray[row] ? quantityArray[row] : '') + '</td>';
        content += '<td>' + (chemistArray[row] ? chemistArray[row] : '') + '</td>';
        content += '<td>' + (pobArray[row] ? pobArray[row] : '') + '</td>';

        // only add "locations + area + '</tr>'" if it is the first row
        // because locations and area will span the whole column
        if (row === 0) {
            content += locations + area + '</tr>';
        } else {
            content += '</tr>';
        }
    }

    $('#tbody').append(content);
}

content += '<td>' + (productsArray[row] ? productsArray[row] : '') + '</td>'; 只是

content += '<td>';

if (productsArray[row]) {
    content += productsArray[row];
} else {
    content += '';
}

content += '</td>';

如果productsArray[row]有项目，假设productsArray[0]为“ Sinarest”，那么productsArray[row]将是真实的。 否则，如果数组中没有更多的乘积，例如productsArray[3]将给我们undefined ，这是一个伪造的值，并且将运行相应的条件。