javascript - 表中的动态行添加

Question

我想向表中添加数组元素。

数组元素是来自数据库的动态元素。我正在创建 Row 以从生成的数据中添加一行并附加 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 数组

但是我无法一个接一个地显示 Chemist 数组。

在上图中，我想显示数据(化学家栏下方的 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 , 这是一个假值，将运行相应的条件。