如何在Javascript / Jquery中添加表格行时更改组合框选择上的文本框

debugcn 发表于 Dev

约瑟夫·马卡里亚（Josephat Macharia）

我有一个动态添加行的表，它具有一个选择框，该框会在触发onchange函数时更改文本框的值，但问题是，当添加新行时，它将重置所有文本框的值，而不是该特定的空值。如何使它发生相应的变化。

$(function () {
    $(document).on('change', 'select.products', function(){
        var selected = $(this).val();
        $(".price").val(selected);
    });
    $(document).on('click', '.addProduct', function(){
        var ele = $(this).parents('tr').clone();
        ele.find('input[type=text]').val('');
        $(this).parents('tr').after(ele);
    });
    $(document).on('click', '.delProduct', function(){
        if($(this).parents('table').find('tr').length > 2) {
            $(this).parents('tr').remove();
        }
    });
});

<table id="addProducts" border="1">
    <tr>
        <td>POI</td>
        <td>Quantity</td>
        <td>Price</td>
        <td>Product</td>
        <td>Add Rows?</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input size=25 type="text" id="lngbox" readonly=true/></td> 
        <td><input size=25 type="text" class="price" readonly=true/></td>
        <td>
            <select name="selRow0" class="products">
                <option value="500">Product 1</option>
                <option value="200">Product 2</option>
                <option value="450">Product 3</option>
            </select>   
        </td>   
        <td><input type="button" class="delProduct" value="Delete" /></td>
        <td><input type="button" class="addProduct" value="AddMore" /></td>
    </tr>
</table>
<div id="shw"></div>

请看下面的小提琴谢谢

https://jsfiddle.net/josephat/xd7zknyc/3/

拉杰什·格兰迪（Rajash Grandhi）

我已经遍历了JS Fiddle链接。您需要通过使用jquery最接近的当前列引用来将值更改为特定行。

解决方法是，更改以下代码并尝试：

$(function () {
  $(document).on('change', 'select.products', function(){
    var selected = $(this).val();
    //$(".price").val(selected);
    $(this).closest('tr').find(".price").val(selected);
  });
  $(document).on('click', '.addProduct', function(){
    var ele = $(this).parents('tr').clone();
    ele.find('input[type=text]').val('');
    $(this).parents('tr').after(ele);
  });
  $(document).on('click', '.delProduct', function(){
    if($(this).parents('table').find('tr').length > 2) {
      $(this).parents('tr').remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="addProducts" border="1">
            <tr>
                <td>POI</td>
                <td>Quantity</td>
                <td>Price</td>
                <td>Product</td>
                <td>Add Rows?</td>
            </tr>
            <tr>
                <td>1</td>
                <td><input size=25 type="text" id="lngbox" readonly=true/></td> 
                <td><input size=25 type="text" class="price" readonly=true/></td>
                <td>
                    <select name="selRow0" class="products">
                        <option value="500">Product 1</option>
                        <option value="200">Product 2</option>
                         <option value="450">Product 3</option>
                    </select>   
                </td>   
                <td><input type="button" class="delProduct" value="Delete" /></td>
                <td><input type="button" class="addProduct" value="AddMore" /></td>
            </tr>
        </table>
        <div id="shw"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。