Question

关键是你要创建一个自己大小的表。当我按下“Calc”按钮时，它是否有任何可能的方法来计算此表中的数字？想象一下，所有行和列都填充了随机数。我想计算同一行中的数字。首先创建一个表，然后用值填充它，然后计算彼此之间的所有值。这是我的代码：

function createTable() {
  var num_rows = document.getElementById('rows').value;
  var num_cols = document.getElementById('cols').value;
  var theader = '<table border="1">\n';
  var tbody = '';

  for (var i = 0; i < num_rows; i++) {
    tbody += '<tr>';
    for (var j = 0; j < num_cols; j++) {
      tbody += '<td>';
      tbody += '<input type="text" name="something">';
      tbody += '</td>'
    }
    tbody += '</tr>\n';
  }
  var tfooter = '</table>';
  document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}

<form name="tablegen">
  <label>col: <input type="text" name="rows" id="rows"/></label><br />
  <label>row: <input type="text" name="cols" id="cols"/></label><br/>
  <input name="generate" type="button" value="Make table!" onclick='createTable();' />
</form>

<div id="wrapper"></div>
<input name="calculate" type="button" value="Calc" />

Answer 1

＆＃13;

function createTable() {
  let num_rows = document.getElementById('rows').value;
  let num_cols = document.getElementById('cols').value;
  let table = '<table id="my-table" border="1" style="width:100%;">';

  for (var i = 0; i < num_rows; i++) {
    table += '<tr>';
    for (var j = 0; j < num_cols; j++) {
      table += '<td><textarea style="width:95%;"></textarea></td>';
    }
    table += '</tr>';
  }
  table += '</table>';
  document.getElementById('wrapper').innerHTML = table;
}

function calcValues() {
  let result = 0;
  let table = document.getElementById('my-table');
  if (table) {
    let textareas = table.getElementsByTagName('textarea');
    if (textareas.length > 0) {
      for (let i = 0; i < textareas.length; i++) {
        let textarea = textareas[i];
        let value = textarea.value;
        if (!isNaN(parseInt(value))) {
          result *= parseInt(value);
        } else {
          textarea.value = 'That was not a number!';
        }
      }
      if (result != 0) document.getElementById('calcResult').innerHTML = '<p>The result is: ' + result.toString() + '</p>';
    }
  } else alert('Make a table!');
}

＆＃13;

<form name="tablegen">
  <input type="text" name="rows" id="rows" placeholder="Columns" />
  <input type="text" name="cols" id="cols" placeholder="Rows" />
  <input name="generate" type="button" value="Make table!" onclick="createTable()" />
</form>
<div id="wrapper" style="margin:5px 0;border:1px solid black;min-height:10px;">Create a table first!</div>
<input name="calculate" type="button" value="Calculate Values!" onClick="calcValues()" />
<p id="calcResult"></p>

＆＃13;

Answer 2

这是另一种方法，它为每一行进行乘法，并将结果作为新列添加到现有表中。

function createTable() {
  var num_rows = document.getElementById('rows').value;
  var num_cols = document.getElementById('cols').value;
  var theader = '<table border="1" id="table">\n';
  var tbody = '';

  for (var i = 0; i < num_rows; i++) {
    tbody += '<tr>';
    for (var j = 0; j < num_cols; j++) {
      tbody += '<td>';
      tbody += '<input type="text" name="something">';
      tbody += '</td>'
    }
    tbody += '</tr>\n';
  }
  var tfooter = '</table>';
  document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}

function calculate() {
  // get the table
  var table = document.getElementById("table");
  if (!table) {
    alert("No table made yet");
    return;
  }
  table = table.children[0];
  // loop through rows
  for (var i = 0; i < table.children.length; i++) {
    if (table.children[i].tagName == "TR") {
      var row = table.children[i];

      var result = row.children[0].children[0].value;
      var result_cell = null;

      // loop through cols
      for (var j = 1; j < row.children.length; j++) {
        if (row.children[j].children[0].name != "result") {
          if (!isNaN(parseInt(row.children[j].children[0].value))) {
            result *= parseInt(row.children[j].children[0].value);
          }
        } else {
          result_cell = row.children[j];
        }

      }
      
      // create new result cell if we don't already have one
      if (result_cell == null) {
        result_cell = document.createElement("TD");
      }
      // update set the value (used an input type)
      result_cell.innerHTML = '<input style="border-color:red;" type="text" name="result" value="' + result + '" readonly>'
      row.appendChild(result_cell);
    }
  }
}

<form name="tablegen">
  <label>row: <input type="text" name="rows" id="rows"/></label><br />
  <label>col: <input type="text" name="cols" id="cols"/></label><br/>
  <input name="generate" type="button" value="Make table!" onclick='createTable();' />
</form>

<div id="wrapper"></div>
<input name="calculate" type="button" value="Calc" onclick='calculate();' />

JavaScript textarea计算

2 个答案: