Перемножение ячеек таблицы JS

08 декабря 2021, 16:00

Как сделать так, что бы при перемножении ячеек таблицы 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;
    }

Answer 1

Есть 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>