html5/javascript乘以输入类型并在表格中显示

Question

我怎样才能创建一个按钮，这样onclick就需要输入这两个值，并将它们相乘并将它们显示在表格中？即使你不能帮助我的桌子部分，乘法会非常有帮助！

Answer 1

比方说你的HTML是：

<form> 
<label>First number</label> 
<input type="text" id="number-1"> 
<label>Second Number</label> 
<input type="text" id="number-2"> 

<input type="submit" value="multiply" id="multiply"> 
</form> 

<table> 
<thead> 
<tr> 
<th>Value 1</th> 
<th>Value 2</th> 
<th>result</th> 

然后你的JavaScript，jQuery的有，就是：

$(function(){ 

    $('#multiply').click(function(event){ 

     event.preventDefault(); 

     var value1 = $("#number-1").val(); 
     var value2 = $("#number-2").val(); 
     var result = value1 * value2; 

     var newRow = $("<tr></tr>"); 

     var firstCell = $("<td></td>"); 

     var secondCell = $("<td></td>"); 

     var resultCell = $("<td></td>"); 

     var valueOne = $("#number-1").val(); 

     var valueTwo = $("#number-2").val(); 

     var result = valueOne * valueTwo; 

     firstCell.append(valueOne); 

     secondCell.append(valueTwo); 

     resultCell.append(result); 

     newRow.append(firstCell); 

     newRow.append(secondCell); 

     newRow.append(resultCell); 

     $('#table-body').append(newRow); 


    }); 

}); 

</script> 

这应该做的伎俩，如果我明白你想要什么:-)

Answer 2

 <script> 
     $(document).ready(function(){ 
     $('#multiply').click(function(event){ 

     event.preventDefault(); 
     var n1=$('#number-1').val(); 
     var n2=$('#number-2').val(); 
     var result=n1*n2; 

     $('#resultholder').fadeIn(200); 
     $('#number1').append(n1); 
     $('#number2').append(n2); 
     $('#result').append(result); 
     }); 
     }); 
     </script> 

现在，这里是你的NIPUT

 <form> 
     <label>First number</label> 
     <input type="text" id="number-1"> 
     <label>Second Number</label> 
     <input type="text" id="number-2"> 
     <input type="submit" value="multiply" id="multiply"> 
     </form> 

这里是你的结果

 <div id="resultholder" style="display:none"> 
     <table border="1"> 
     <tr> 
     <td id="number1"></td> 
     <td id="number2"></td> 
     <td id="result"></td> 
     </tr> 
     </table> 
     </div>