JavaScriptのtextarea計算

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

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!'); 
 
}

<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>

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();' />