在動態添加表中的行時，選擇框未更改

Question

您好iam能夠使用javascript從下表中動態添加行，但是在選擇框上觸發的onchange函數僅在添加的第一行有效，您如何使它對添加的每一行都起作用。謝謝。

<html>
    <body>
        <link href="style.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src='script.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" id="price" readonly=true/></td>
                <td>
                    <select name="selRow0" class="products">
                        <option value="value0">Product 1</option>
                        <option value="value1">Product 2</option>
                    </select>   
                </td>   
                <td><input type="button" id="delProducts" value="Delete" onclick="deleteRow(this)"/></td>
                <td><input type="button" id="addmoreProducts" value="AddMore" onclick="insRow()"/></td>
            </tr>
        </table>
        <div id="shw"></div>
    </body>
</html>

$(function () {
    $("select.products").on("change", function () {
        var selected = $(this).val();
        $("#price").val(selected);
    })
});


function deleteRow(row)
{
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById('addProducts').deleteRow(i);
}


function insRow()
{
    var x = document.getElementById('addProducts');
    // deep clone the targeted row
    var new_row = x.rows[1].cloneNode(true);
    // get the total number of rows
    var len = x.rows.length;
    // set the innerHTML of the first row 
    new_row.cells[0].innerHTML = len;

    // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

    // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

    // append the new row to the table
    x.appendChild(new_row);
}

Answer 1

嘗試這個，

$("select.products").on("change", function(){
    var selectedValue = $(this).val();

    var td = $(this).parent();
    (((td).parent()).children()[2].getElementsByTagName("input")[0]).value = selectedValue;
});

Answer 2

我已經更新了您的代碼。 現在應該可以使用了。 看看這個jsfiddle ：

JS：

$(function () {
  $(document).on('change', 'select.products', function(){
    var selected = $(this).val();
    $(this).parents('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();
    }
  });
});

另外，我還更新了您的HTML：

<td><input size=25 type="text" class="lngbox" readonly=true/></td> 
<td><input size=25 type="text" class="price" readonly=true/></td>
<td><input type="button" class="delProduct" value="Delete" /></td>
<td><input type="button" class="addProduct" value="AddMore" /></td>

在動態添加表中的行時，選擇框未更改

問題描述

2 個解決方案

解決方案1
0 2016-10-28 10:01:10

解決方案2
0 已采納 2016-10-28 11:36:06

在動態添加表中的行時，選擇框未更改

問題描述

2 個解決方案

解決方案1 0 2016-10-28 10:01:10

解決方案2 0 已采納 2016-10-28 11:36:06

解決方案1
0 2016-10-28 10:01:10

解決方案2
0 已采納 2016-10-28 11:36:06