在動態添加表格中的行時選擇框不會改變

嗨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); 
}

來源

2016-10-28 Mashaa

嘗試'$（文件）。在（ '變'， 'select.products'，函數（）{}）;'。 – Huelfe

沒有工作，雖然..謝謝Huelfe。 – Mashaa

我已經更新了你的代碼。這應該現在工作。看看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>

來源

2016-10-28 11:36:06 Huelfe

良好的進步Huelfe但是onchange函數對id價格的第一行輸入元素有影響..它的效果應該是對每個相應的輸入元素已添加..只需要你調整代碼有點謝謝我欣賞 – Mashaa

我找到了修復。我只是改變了屬性從ID到類，它的工作....謝謝Huelfe – Mashaa

，但有一個小錯誤，onchange函數影響所有輸入元素的價值與已添加的類價格。 – Mashaa

試試這個，

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

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

來源

2016-10-28 10:01:10

仍然沒有工作。雖然..謝謝 – Mashaa

在動態添加表格中的行時選擇框不會改變

回答

相關問題