Question

在我的网站上，我可以选择使用此代码添加（多次）带按钮的输入，

$("#add_new_detail").click(function() { 
    $("#det_add_area").append('
        <div id="no_'+i+'"><table><tr><td> '+i+' </td><td> 
            <input type="text" name="det['+i+'][details]" /> </td><td> 
            <input type="text" name="det['+i+'][amount]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][price_real]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][price_user]" value="0" /> </td><td> 
            <input type="text" name="det['+i+'][total_price]" value="0" DISABLED  /> 
            </td><td> <input type="text" name="det['+i+'][total_price_for_user]" value="0" DISABLED  /> </td><td>
            <div class="delete_line" onClick="re(\'no_'+i+'\')"> delete </div></td></tr></table></div>
  '); 
  i++; 
});

现在，每次单击按钮，它都会创建一个新的输入行。这是完美的。现在我正在尝试在输入之间进行计算，我正在尝试输入一个数字

det ['+ i +'] [金额]

并将其加倍（数学）

DET [ '+ I +'] [price_real]

并将结果发布在

中

DET [ '+ I +'] [TOTAL_PRICE]

现在我不知道如何与这些特定字段（通过按钮点击创建）进行交互 - 每行都有自己的金额，price_real，total_price ...如何使用onKeyUp进行计算？如果有人能让我知道我从这一点开始如何继续前进，我将不胜感激。

谢谢：）

Answer 1

我建议你为你想要使用的每个输入添加一个唯一的id，因为通过id选择实际上是明确的（而不是按名称选择）。然后你就可以使用$（“＃theId”）。val（）来获取文本框的输入值，并使用$（“＃theId”）。val（new_Value）来设置它。

另外，从代码猜测，你将使用方括号作为你的id。在这种情况下，你应该在jquery选择器中转义它，如下所示：$（“det \ [1 \] \ [total_price \]”）

希望有所帮助：）

Answer 2

在这里...我已将name属性修改为id。还使用_代替[。

<强> Live Demo

每当您更改amount或price_real时，相应的total_price都会更改(total_price = amount * price_real)。

<强>的jQuery

$("#add_new_detail").on("click", function() { 
    $("#det_add_area").append('<div id="no_'+i+'"><table><tr><td> '+i+' </td><td> \
            <input type="text" id="det_'+i+'_details" /> </td><td> \
            <input type="text" id="det_'+i+'_amount" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_price_real" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_price_user" value="0" /> </td><td> \
            <input type="text" id="det_'+i+'_total_price" value="0" DISABLED  /> \
            </td><td> <input type="text" id="det_'+i+'_total_price_for_user" value="0" DISABLED  /> </td><td>\
            <div class="delete_line" onClick="re(\'no_'+i+'\')"> delete </div></td></tr></table></div>\
    '); 

    $("#det_" + i + "_amount").on("change", function() { 
        calculate(this); 
    });

    $("#det_" + i + "_price_real").on("change", function() { 
        calculate(this); 
    });

    i++;
});

function calculate(e) {
    j = $(e).attr('id').split("_")[1]
    total = $("#det_" + j + "_amount").val() * $("#det_" + j + "_price_real").val();
    $("#det_" + j + "_total_price").val(total);
}

计算多输入（jquery）

2 个答案: