Javascript 如何为字段添加自动计算 html代码

我还写了另一个函数addNewQualification。 使用它，我将向表中添加另一行

function addNewQualification(){
    var rowCount = $('#profDetHolder tr').length;
    var trData = '<tr id="'+rowCount+'row"><input type="hidden" name="data[User][qua]['+rowCount+'][id]" value="0" /><td><input type="text" name="data[User][qua]['+rowCount+'][billno]" value="<?php foreach ($Categories1 as $Category): echo $Category['Bill']['billno'] + 1; endforeach;?>" /></td><td><select id="cd" name="data[User][qua]['+rowCount+'][subcategory]" required x-moz-errormessage ="please select the category"><option>--select category--</option><?php foreach ($Categories as $Category): ?><option value="<?php echo $Category['Category']['category'] ?>"><?php echo $Category['Category']['category'];?></option><?php endforeach; ?></select></td><td><input type="text" name="data[User][qua]['+rowCount+'][qty]" onkeyup="add_numbers()" value="" /></td> <td><input type="text" name="data[User][qua]['+rowCount+'][amount]" value="" /></td> <td><input type="text" name="data[User][qua]['+rowCount+'][dis]" value="0" /></td><td><input type="text" name="data[User][qua]['+rowCount+'][total]" value="" /></td><td><select name="data[User][qua]['+rowCount+'][user]" value=""  required ><option>1</option><option>2</option><option>3<option></select></td><td><input type="hidden" name="data[User][qua]['+rowCount+'][cash]" value="<?php echo AuthComponent::user('username'); ?>" /></td><td><button type="button" onclick="deleteRow('+rowCount+',0)" class="add_btn" style="font-size:20px;">-</button></td></tr>';
    $("#profDetHolder tr:last").after(trData);
}

---

在这里，我如何将自动计算添加到新添加的行，使用函数add\u number，我只能根据新添加行的id计算字段。我如何为字段添加自动计算。

使用jQuery库和基于类的选择器，例如

    <tr>
        <td><input type="text" class="field1" onkeyup="add_number(this)" /></td>
        <td><input type="text" class="field2" onkeyup="add_number(this)" /></td>
        <td><input type="text" class="total" /></td>
    </tr>


    function add_number(elem){
        var parent=$(elem).parent().parent(); //input>td>tr
        var sum=0;
        sum=$('.field1',parent).val()+$('.field2',parent).val();
        $('.total',parent).val(sum);
    }

---

每次输入的ID都是该表中所有行的ID

您可以在之前添加数据，以便从数据集获取数据

此外，您也不引用应计算的行。您的add_number函数不知道订单来自哪一行

我制作了一个您可以使用的普通JavaScript示例：

函数add_numberinp{ var tr=inp.parentNode.parentNode； var first_number=parseInttr.querySelector'[data id=qty]'。值； var second_number=parseInttr.querySelector'[data id=amount]'。值； var third_number=parseInttr.querySelector'[data id=dis]'。值； var结果=第一个\u编号*第二个\u编号； var res=结果-第三个数字； tr.querySelector“[data id=total]”。value=res？res:； }

---

你能不能再清楚一点功能呢！

function addNewQualification(){
    var rowCount = $('#profDetHolder tr').length;
    var trData = '<tr id="'+rowCount+'row"><input type="hidden" name="data[User][qua]['+rowCount+'][id]" value="0" /><td><input type="text" name="data[User][qua]['+rowCount+'][billno]" value="<?php foreach ($Categories1 as $Category): echo $Category['Bill']['billno'] + 1; endforeach;?>" /></td><td><select id="cd" name="data[User][qua]['+rowCount+'][subcategory]" required x-moz-errormessage ="please select the category"><option>--select category--</option><?php foreach ($Categories as $Category): ?><option value="<?php echo $Category['Category']['category'] ?>"><?php echo $Category['Category']['category'];?></option><?php endforeach; ?></select></td><td><input type="text" name="data[User][qua]['+rowCount+'][qty]" onkeyup="add_numbers()" value="" /></td> <td><input type="text" name="data[User][qua]['+rowCount+'][amount]" value="" /></td> <td><input type="text" name="data[User][qua]['+rowCount+'][dis]" value="0" /></td><td><input type="text" name="data[User][qua]['+rowCount+'][total]" value="" /></td><td><select name="data[User][qua]['+rowCount+'][user]" value=""  required ><option>1</option><option>2</option><option>3<option></select></td><td><input type="hidden" name="data[User][qua]['+rowCount+'][cash]" value="<?php echo AuthComponent::user('username'); ?>" /></td><td><button type="button" onclick="deleteRow('+rowCount+',0)" class="add_btn" style="font-size:20px;">-</button></td></tr>';
    $("#profDetHolder tr:last").after(trData);
}

    <tr>
        <td><input type="text" class="field1" onkeyup="add_number(this)" /></td>
        <td><input type="text" class="field2" onkeyup="add_number(this)" /></td>
        <td><input type="text" class="total" /></td>
    </tr>


    function add_number(elem){
        var parent=$(elem).parent().parent(); //input>td>tr
        var sum=0;
        sum=$('.field1',parent).val()+$('.field2',parent).val();
        $('.total',parent).val(sum);
    }