Question

我如何创建一个按钮，以便点击它将输入这两个值，并将它们相乘并显示在表格中？即使你不能帮助我使用表格部分，乘法也会非常有用！

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>

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

2 个答案: