Заполните таблицу в соответствии с другими ячейками с JS

Question

Я пытаюсь заполнить HTML-таблицу в соответствии с левыми ячейками этой таблицы.

Таким образом, этот код ниже создает таблицу, которая заполнена переменными:

<table id="myTable" ></table>
    <script>

        var rightcell = [{name : "Name2", carac: "N2"},{name : "Name8", 
        carac: "N8"},{name : "Name5", carac: "N5"}]
        setName = rightcell.map(a => a.name);
        setCarac = rightcell.map(a => a.carac);


        var cellobj;

        for (var j = 0; j < 10; j++) {
            arr2 = [
                "Name1" ,"Name2","Name3" ,"Name4","Name5" ,"Name6","Name7" ,"Name8","Name9" ,"Name10"
                ];



            var table = document.getElementById("myTable");
            var row = table.insertRow(j);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

            cell1.innerHTML = arr2[j]

        }
        $('myTable').find('td').each(function () {

                if (setName[j] == arr2[j]) {
                 cell2.innerHTML = setCarac[j]
                 }
                else {
                cell2.innerHTML = "nothing"
            }

            })
    </script>

IЯ также пытался выполнить цикл в массиве, но безуспешно:

    <script>

        var rightcell = [{name : "Name2", carac: "N2"},{name : "Name8", carac: "N8"},{name : "Name5", carac: "N5"}]
        setName = rightcell.map(a => a.name);
        setCarac = rightcell.map(a => a.carac);


        var cellobj;

        for (var j = 0; j < 10; j++) {
            arr2 = [
                "Name1" ,"Name2","Name3" ,"Name4","Name5" ,"Name6","Name7" ,"Name8","Name9" ,"Name10"
                ];



            var table = document.getElementById("myTable");
            var row = table.insertRow(j);
            var cell1 = row.insertCell(0);

            var cell2 = row.insertCell(1);

            cell1.innerHTML = arr2[j]



            arr2.forEach(function() {
              if (setName[j] == arr2[j]) {
       cell2.innerHTML = setCarac[j]
            }
            else {
                cell2.innerHTML = "nothing"
            }

            })


        }
    </script>

Я хочу, чтобы каждая левая ячейка проверяла, имеет ли правая ячейка то же имя в массиве объекта Rightcell, и печаталаcarac соответственно. (N1 должен быть рядом с Name1 и т. д.).

Есть идеи?Спасибо за помощь.

Answer 1

В вашем коде много ошибок, таких как использование arr2 / cell2 вне их областей, не использование # для получения идентификатора и т. Д. Посмотрите на рабочий код:

Это работает:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<table id="myTable"></table>
<script>
  var rightcell = [{
    name: "Name2",
    carac: "N2"
  }, {
    name: "Name8",
    carac: "N8"
  }, {
    name: "Name5",
    carac: "N5"
  }];

  var rightCellMap = {};
  for (var index = 0; index < rightcell.length; index++) {
    rightCellMap[rightcell[index].name] = rightcell[index].carac;

  }

  arr2 = [
      "Name1", "Name2", "Name3", "Name4", "Name5", "Name6", "Name7", "Name8", "Name9", "Name10"
    ];

  for (var j = 0; j < 10; j++) {

    var table = document.getElementById("myTable");
    var row = table.insertRow(j);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    cell1.innerHTML = arr2[j]
  }

  $('#myTable').find('tr').each(function (index, element) {

    var firstTd = $(element).find('td:first')[0];

    var firstTdData = firstTd.innerHTML;

    if (firstTdData != '' && rightCellMap[firstTdData]) {
      firstTd.nextSibling.innerHTML = rightCellMap[firstTdData];
    } else {
      firstTd.nextSibling.innerHTML = "nothing"
    }

  })

</script>