Выберите окно, не изменяющееся при динамическом добавлении строк в таблицу

Привет 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

Try '$ (документ) .он ('изменение', 'select.products', функция() {}); '. – Huelfe

нерабочий. Хотя..Thanks 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

Выберите окно, не изменяющееся при динамическом добавлении строк в таблицу

ответ

Смежные вопросы