Question

我可以使用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

我已经更新了你的代码。这应该现在有效。看看this 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 个答案: