动态创建表时如何创建ID的元素

Question

Hi guy's i have a problem with creating an element of id's while create a table dynamically. i want make the id's different from one column to the another. i realize that i must use an array for doing that. but i don't know where i must to place that array for the id's. i want to create the id's of <input type='text' id='input[J]' <<< just for example

this is my code for create the table

$(document).ready(function() {
  $('#submit-file').on("click", function(e) {
    if ($('#files').val() == "") {
      alert("Anda Harus Memasukkan File Terlebih Dahulu");
    } else {
      e.preventDefault();

      $('#files').parse({
        config: {
          delimiter: "",
          skipEmptyLines: false,
          complete: displayHTMLTable,
        },
        before: function(file, inputElem) {
          //console.log("Parsing file...", file);
        },
        error: function(err, file) {
          //console.log("ERROR:", err, file);
        },
        complete: function() {
          //console.log("Done with all files");
        }
      });
    }
  });

  function displayHTMLTable(results) {
    var table = "<table id='table_data' class='table table-bordered' width='90%'>";
    var data = results.data;
    var size = -1;
    var check1 = 1;
    var check2 = 100;
    table += "<tbody>";
    for (i = 0; i < data.length; i++) {
      table += "<tr>";
      var row = data[i];
      var cells = row.join(";").split(";");
      if (cells.length < size) continue;
      else if (cells.length > size) size = cells.length;
      if (cells.length < check1 || cells.length > check2) {
        alert('Data Yang Anda Masukkan Salah');
        return false;
      } else {
        for (j = 0; j < cells.length; j++) {

          table += "<td>";
          table += cells[j];
          table += "</td>";
        }

        table += "<td><input type='text' name='input1' id='input1' size='2'></td>";
        table += "<td><input type='text' name='input2' id='input2' size='2'></td>";
        table += "<td><input type='text' name='input3' id='input3' size='7'></td>";
        table += "</tr>";

      }
    }
    table += "</tbody>";
    table += "</table>";
    $("#parsed_csv_list").html(table);

  }
});

Answer 1

If you use the backtick ``(above the tab) then you can use the ${} syntax to gain access to a variable within a string. Below is your code with a count variable that is initialized to 1 and then incremented after each use. It can be accessed in any string like this: `here is a string ${count}`

  for (i = 0; i < data.length; i++) {
    table += "<tr>";
    var row = data[i];
    var cells = row.join(";").split(";");
    var count = 1;
    if (cells.length < size) continue;
    else if (cells.length > size) size = cells.length;
    if (cells.length < check1 || cells.length > check2) {
      alert('Data Yang Anda Masukkan Salah');
      return false;
    } else {
    for (j = 0; j < cells.length; j++) {
      table += "<td>";
      table += cells[j];
      table += "</td>";
    }

    table += `<td><input type='text' name='input${count}' id='input${count}' size='2'></td>`;
    count++;
    table += `<td><input type='text' name='input${count}' id='input${count}' size='2'></td>`;
    count++;
    table += `<td><input type='text' name='input${count}' id='input${count}' size='7'></td>`;
    table += "</tr>";

  }
}

If you want to do this in a loop then it's even easier. Inside the loop that you're using to create the table make another loop and create each td in that loop:

for (var j = 1; j <= 3; j++) {
  table += `<td><input type='text' name='input${j}' id='input${j}' size='2'></td>`;
}

So your table code could use a loop and end up looking like this (I'm not dealing with your data. Just showing you how to make your ids work):

for (i = 0; i < data.length; i++) {
    table += "<tr>"; 
    for (var j = 1; j <= 3; j++) {
        table += `<td><input type='text' name='input${j}' id='input${j}' size='2'></td>`;
      }   
   }
   table += "</tr>";
}