3

Как сделать так, что бы при перемножении ячеек таблицы 1 и таблицы 2,
в таблицу 3 результат перемножения каждой ячейки выводился в ту же ячейку в новой таблице, где находится число в первой таблице.

Таблица 1:

введите сюда описание изображения

Таблица 2:

введите сюда описание изображения

Итоговая таблица 3, в ней и должно выводиться итоговое число при перемножении, сейчас оно выводится не правильно, помогите пожалуйста:

введите сюда описание изображения

Код:

//функция создания итоговой таблицы
    function calculateTable(arrayRows3, arrayColumns3)
    {
        [rows3, columns3] = [arrayRows3, arrayColumns3];

        for (let i = 0; i < arrayRows3; i++)
        {
            array3[i] = [];
            let row = table3.insertRow(-1);

            for (let j = 0; j < arrayColumns3; j++)
            {
                array3[i][j] = i + j;
                let cell = row.insertCell(-1);
                cell.innerHTML = "<input style='width: 50px; height: 50px; text-align: center;' type='text' id='calculateTable'>";
            }
        }
    }

    //при нажатии на кнопку количество строк и столбцов выбирается в зависимости от размеров двух таблиц, выбирается большаяя
    get("calculate").onclick = function(rowsTotal, columnsTotal) {
        if (rows1 > rows2 && columns1 > columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 < rows2 && columns1 < columns2)
        {
            rowsTotal = rows2;
            columnsTotal = columns2;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 > rows2 && columns1 < columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns2;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 < rows2 && columns1 > columns2)
        {
            rowsTotal = rows2;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 === rows2 && columns1 === columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 === rows2 && columns1 > columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 === rows2 && columns1 < columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns2;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 > rows2 && columns1 === columns2)
        {
            rowsTotal = rows1;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }
        else if (rows1 < rows2 && columns1 === columns2)
        {
            rowsTotal = rows2;
            columnsTotal = columns1;
            calculateTable(rowsTotal, columnsTotal);
        }

        let numbFirstTable = [];
        let numbSecondTable = [];
        var readyArray = [];
        let countInputFirst = document.getElementsByClassName("firstTable").length;
        let countInputSecond = document.getElementsByClassName("secondTable").length;

        // пушим все числа записные в инпут первой таблицы в отдельный массив
        for (let f = 0; f < countInputFirst; f++) {
            var firstValue = document.getElementsByClassName('firstTable')[f].value;
            var numberFirstValue = +firstValue;
            numbFirstTable.push(numberFirstValue);

            // преобразование одномерного массива в двумерный two-dimensional
            function newDimensionalArrayFirstTable(input, size)
            {
                for (var x, i = 0, c = -1, l = input.length, n = []; i < l; i++)
                {
                    if (x = i % size)
                    {
                        n[c][x] = input[i];
                    }
                    else
                    {
                        n[++c] = [input[i]];
                    }
                }
                return n;
            }
            var arrayDimensional1 = newDimensionalArrayFirstTable(numbFirstTable, columns1);
        }

        // пушим все числа записные в инпут второй таблицы в отдельный массив
        for (let s = 0; s < countInputSecond; s++) {
            var secondValue = document.getElementsByClassName('secondTable')[s].value;
            var numberSecondValue = +secondValue;
            numbSecondTable.push(numberSecondValue);

            function newDimensionalArraySecondTable(input, size)
            {
                for (var x, i = 0, c = -1, l = input.length, n = []; i < l; i++)
                {
                    if (x = i % size)
                    {
                        n[c][x] = input[i];
                    }
                    else
                    {
                        n[++c] = [input[i]];
                    }
                }
                return n;
            }
            var arrayDimensional2 = newDimensionalArraySecondTable(numbSecondTable, columns2);
        }

        // длина полученых массивов из инпутов двух таблиц
        let lengthNumbFirstTable = numbFirstTable.length;
        let lengthNumbSecondTable = numbSecondTable.length;

        // Перемножение данных ячеек
        if (lengthNumbFirstTable > lengthNumbSecondTable)
        {
            for (let g = 0; g < lengthNumbFirstTable; g++)
            {
                if (isNaN(numbFirstTable[g]))
                {
                    readyArray.push(null * numbSecondTable[g]);
                }
                else if (isFinite(numbFirstTable[g]) && isFinite(numbSecondTable[g]))
                {
                    readyArray.push(numbFirstTable[g] * numbSecondTable[g]);
                }
                else if (isNaN(numbSecondTable[g]))
                {
                    readyArray.push(numbFirstTable[g] * null);
                }
                else
                {
                    readyArray.push(numbFirstTable[g] * numbSecondTable[g]);
                }
            }
        }
        else if (lengthNumbFirstTable < lengthNumbSecondTable)
        {
            for (let z = 0; z < lengthNumbSecondTable; z++)
            {
                if (isNaN(numbFirstTable[z]))
                {
                    readyArray.push(null * numbSecondTable[z]);
                }
                else if (isFinite(numbFirstTable[z]) && isFinite(numbSecondTable[z]))
                {
                    readyArray.push(numbFirstTable[z] * numbSecondTable[z]);
                }
                else if (isNaN(numbSecondTable[z]))
                {
                    readyArray.push(numbFirstTable[z] * null);
                }
                else
                {
                    readyArray.push(numbFirstTable[z] * numbSecondTable[z]);
                }
            }
        }
        else if (lengthNumbFirstTable === lengthNumbSecondTable)
        {
            for (let r = 0; r < lengthNumbFirstTable; r++)
            {
                if (isNaN(numbFirstTable[r]))
                {
                    readyArray.push(null * numbSecondTable[r]);
                }
                else if (isFinite(numbFirstTable[r]) && isFinite(numbSecondTable[r]))
                {
                    readyArray.push(numbFirstTable[r] * numbSecondTable[r]);
                }
                else if (isNaN(numbSecondTable[r]))
                {
                    readyArray.push(numbFirstTable[r] * null);
                }
                else
                {
                    readyArray.push(numbFirstTable[r] * numbSecondTable[r]);
                }
            }
        }

        if (columns1 > columns2 && rows1 === rows2)
        {
            let difference = columns1 - columns2;

            for (let i = 0; i < difference; i++)
            {
                readyArray.splice(columns2, 0, 0);
            }
        }



        $("#tableThree tbody").remove();
        let html = "";
        let index = 0;
        for (let i = 0; i < rowsTotal; i++) {
            for (let j = 0; j < columnsTotal; j++) {
                html += `<input type="number" value="${readyArray[index++]}" style="width: 50px; margin: 1px; height: 50px; text-align: center;" disabled/>`;
            }
            html += "<br/>";
        }
        document.getElementById("tableThree").innerHTML = html;
    }
2
  • 2
    покажите код лучше, а не скрины
    – WVFFLIFE
    3 дек 2019 в 6:57
  • добавил код, строго не судите я новенький, подскажите как это сделать 3 дек 2019 в 7:15

1 ответ 1

3

Есть 2 таблицы разного размера. Зачем заморачиваться с такими условиями, если можно просто достать количество строк обеих таблиц и получить максимальное из них через Math.max(). Та же история и со столбиками. Из полученных чисел будет ясен размер итоговой таблицы... которая спокойно создается в двойном цикле.

А числа - доставать прямо из таблиц, а не переводить в массивы:

let one = document.getElementById('one');
let two = document.getElementById('two');

multiplyTables(one, two);

function multiplyTables(tab1, tab2){  
  let tr1 = tab1.rows;
  let tr2 = tab2.rows;
  
  let rows  = Math.max( tr1.length, tr2.length );
  let cells = Math.max( tr1[0].cells.length, tr2[0].cells.length);
  
  let res = document.getElementById('result');
      res.innerHTML = "";

  for( let i = 0; i < rows; i++ ){
    let tr = document.createElement('tr');

    for( let j = 0; j < cells; j++ ){
      let td = document.createElement('td');
      
      let a = ( tr1[i] && tr1[i].cells[j] ) ? tr1[i].cells[j].querySelector('input').value : 0;
      let b = ( tr2[i] && tr2[i].cells[j] ) ? tr2[i].cells[j].querySelector('input').value : 0;

      // Если у таблицы есть строка под номером `i` и в ней есть клетка под номером `j`,
      // Находим инпут внутри неё и достаем число, иначе - ноль.
      
      // tr1[i].cells[j].textContent — если бы там были просто числа, без инпута

      td.textContent = a * b;
      
      tr.appendChild(td);
    }
    
    res.appendChild(tr);
  }
}
table {
  border-collapse: collapse;
  display: inline-block;
  vertical-align: top;
}

td {
  text-align: center;
  width: 30px;
  height: 30px;
  border: 1px solid #123;
}

input {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  text-align: center;
}
<table id="result"></table>
<hr>
<table id="one">
  <tr>
    <td><input value="2"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="2"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="2"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="2"></td>
  </tr>
</table>

<table id="two">
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
  </tr>
</table>

Хотя, идею с массивами тоже можно развить:

let one = document.getElementById('one');
let two = document.getElementById('two');

multiplyTables(one, two);

function multiplyTables(tab1, tab2) {
  let arr1 = collectMatrix(tab1);
  let arr2 = collectMatrix(tab2);  
  
  console.log( JSON.stringify( arr1 )     .replace(/,\[/g, ",\n[").replace(/(\[\[|\]\])/g, e => e[0]) );
  console.log( JSON.stringify( arr2 )     .replace(/,\[/g, ",\n[").replace(/(\[\[|\]\])/g, e => e[0]) );
  // На replace не смотреть, сделано для demo.
  
  let rows  = Math.max( arr1.length, arr2.length );
  let cells = Math.max( arr1[0].length, arr2[0].length );
  
  let final = [];
  for( let i = 0; i < rows; i++ ){
    let temp = [];
    for( let j = 0; j < cells; j++ ){
      let a = arr1[i] && arr1[i][j] ? arr1[i][j] : 0;
      let b = arr2[i] && arr2[i][j] ? arr2[i][j] : 0;
      temp.push( a * b );
    }
    final.push(temp);
  }
  
  console.log( JSON.stringify( final )     .replace(/,\[/g, ",\n[").replace(/(\[\[|\]\])/g, e => e[0]) );
  // На основе полученного массива уже создавать финальную таблицу
}

function collectMatrix(table){
  return [...table.rows].map( row => {
    return [...row.cells].map( cell => +cell.querySelector('input').value );
  });
  
  /* То же самое на классическом цикле:
  
  let a = [];
  for( let i = 0; i < table.rows.length; i++ ){
    let temp = [];
    for( let j = 0; j < table.rows[i].cells; j++ ){
      temp.push( table.rows[i].cells[j].querySelector('input').value );
    }
    a.push(temp);
  }  
  return a;

  `map` просто не требует создавать временные переменные, и будто на ходу
  подменяет элементы массива на что-то другое.
  
  */
}
table {
  border-collapse: collapse;
  display: inline-block;
  vertical-align: top;
}

td {
  text-align: center;
  width: 30px;
  height: 30px;
  border: 1px solid #123;
}

input {
  width: 30px;
  height: 30px;
  border: none;
  outline: none;
  text-align: center;
}
<table id="result"></table>
<hr>
<table id="one">
  <tr>
    <td><input value="2"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="2"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="2"></td>
    <td><input value="1"></td>
  </tr>
  <tr>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="1"></td>
    <td><input value="2"></td>
  </tr>
</table>

<table id="two">
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input value="2"></td>
    <td><input></td>
  </tr>
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
  </tr>
</table>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.