Question

我有一个动态添加行的表，它有一个选择框，可以在触发onchange函数时更改文本框的值，但问题是它重置了所有文本框值而不是新的文本框值行被添加。你如何相应地改变它。

private HashMap<String, GeoLocation> loadLocationData() {
    String csvFile = "C:\\Users\\MyName\\Documents\\MyApplication\\app\\src\\main\\res\\raw\\geo_locations.csv";
    String line = "";
    String cvsSplitBy = ",";

    try (BufferedReader br = new BufferedReader(new FileReader(csvFile))) {

        while ((line = br.readLine()) != null) {
            String[] cityloc = line.split(cvsSplitBy);
            locations.put(cityloc[0], new GeoLocation(cityloc[0], Double.parseDouble(cityloc[1]), Double.parseDouble(cityloc[2]), TimeZone.getTimeZone(cityloc[3])));
       }
    } catch (IOException e) {
        e.printStackTrace();
    }

    return locations;
}

$(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();
        }
    });
});

请看下面的小提琴谢谢

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

Answer 1

我已经浏览了你的JS Fiddle Link。你需要通过使用最接近jquery的当前列引用将值更改为特定行。

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

＆＃13;

$(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();
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

更好的解决方案是生成具有不同ID的整个tr，其价格文本框将与下拉选项ID /名称匹配，然后根据此ID进行更新。

如果您想要快速解决方案，请使用以下

替换您的更改事件

   $(document).on('change', 'select.products', function(event){
        var selected = $(this).val();
        $(event.target.parentNode.parentNode).find(".price")[0].value = selected;
      });

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

2 个答案: