Question

帮助。我想制作这样的东西，例如，ill在textboxAdd上定价，当我按下按钮时，textbox1将复制textboxAdd的值（其中第一个价格在那里）。然后我再次把（第二价格）放在textboxAdd上并按下按钮，textboxAdd的值（这是第二个价格），它将在textbox2中。请帮助。谢谢。我的代码在这里和输出：

<html>
<body>
<head>
<script  language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
    <table>
<tr><td>Add to list:</td><td><input type="text" name="addkist" value=""> </td></tr>
<tr>
<td>&nbsp;</td>
<td align="center"><input type="button" value="ADD TO LIST"></td>
</form>
</tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr> 
<th align="center" colspan="2" bgcolor="0033CC"><font color="white">Shopping LIST</font></th>
<tr><td ><center>No.</center></td><td ><center>Amount</center></td></tr>
<tr><td ><center>01</td><td><input class="total" type=text name=01></td></tr>
<tr><td ><center>02</td><td><input class="total" type=text name=02></td></tr>
<tr><td ><center>03</td><td><input class="total" type=text name=03></td></tr>
<tr><td ><center>04</td><td><input class="total" type=text name=04></td></tr>
<tr><td ><center>05</td><td><input class="total" type=text name=05></td></tr>
<tr><td ><center>06</td><td><input class="total" type=text name=06></td></tr>
<tr><td ><center>07</td><td><input class="total" type=text name=07></td></tr>
<tr><td ><center>08</td><td><input class="total" type=text name=08></td></tr>
<tr><td >TOTAL:</td><td align="center"> <span id="sum">0</span></td></tr>
</td></table>
<script>
$(document).ready(function(){
    $(".total").each(function() 
    {
        $(this).keyup(function()
        {
            calculateSum();
        });
    });
});
function calculateSum() 
{
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".total").each(function() 
    {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) 
        {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));
}
    </script>
    </body> 
</html>

Answer 1

下面：

// First let's put an ID attribute to recognize your button:
<input type="button" id="btn-add-to-list" value="ADD TO LIST">

// Next, Change your script code to:
<script>
$(document).ready(function(){
    num = 1; // this will be used to navigate to the next textbox

    $("#btn-add-to-list").click(function(){

                 // get the current value of the textbox
                val_to_add = $("input[name='addkist']").val(); 

                // checking if number is entered
                if(!isNaN(val_to_add) && val_to_add.length!=0) 
                {

                // clear the textbox to add to
                $("input[name='0"+num+"']").val('');

                // add the value of 'addkist' textbox to 'textbox 01, 02, 03' 
                // etc.in sequence
                $("input[name='0"+num+"']").val(val_to_add);

                // increment counter to go the next texbox
                num++;

                // if the last textbox reached, reset the counter
                if(num==9){num=1;}

                    calculateSum();
                }
            });
});
// this code of yours remains the way it was
function calculateSum() 
{
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".total").each(function() 
    {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) 
        {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2));
}
</script>

<强> Fiddle Demo

根据以下评论中提到的要求变更制作的小提琴修改：
的 Fiddle Demo allowing commas

添加到列表，javascript。使用按钮将文本框的值复制到另一个文本框

1 个答案: