Таблица Добавить еще строку с помощью javascript

Question

Я добавляю динамическую строку в таблицу. Но при добавлении новой строки я хочу заменить некоторую строку на новую строку. Но это не работает.

<table id="testTable"> 
    <tr id="row_1"> 
     <td> 
      <select onchange="changeCustomCategory(this.value,'1');" id="_cid" name="_cid[0]" > 
       <option value="">--Select Product--</option> 
       <option value="test">Test</option> 
      </select> 
      <input type="text" onchange="_doVariation(1);" value="1" id="_qty" name="_qty[0]"/> 
      <input type="text" class="textfield" value="0.00" id="item1_total" name="item1_total" readonly> 
     </td> 
    </tr>  
</table> 

<input type="hidden" value="1" id="total_row"> 
<input type="button" onclick="addRow()" value="Add Row"> 

Это мой HTML-код.

function addRow(){ 
    var total_row = document.getElementById("total_row").value; 
    var _previousId = parseInt(total_row); 
    var new_id = parseInt(total_row) + 1; 
    document.getElementById("total_row").value = new_id; 

    var table = document.getElementById("testTable"); 
    jQuery("#"+ table.rows[0].id).clone().appendTo("#testTable"); 

    var totalTableRow = table.rows.length; 
    var currentRow = table.rows[totalTableRow-1]; 

    currentRow.id = "row_"+new_id; 

    currentRow.innerHTML = currentRow.innerHTML.replace('_cid\['+ new_id-1 +'\]','_cid['+new_id+']'); 
    currentRow.innerHTML = currentRow.innerHTML.replace(new RegExp("changeCustomCategory(this.value,'"+_previousId+"')","g"),'changeCustomCategory(this.value,'+new_id+')'); 
    currentRow.innerHTML = currentRow.innerHTML.replace('_doVariation('+_previousId+')','_doVariation('+new_id+')'); 
} 

Answer 1

Я предлагаю придерживаться функций jquery и не смешивать слишком много с простым javascript. Это упрощает кодирование и отслеживание.

Я считаю, что это то, что вы пытаетесь сделать:

изменения HTML

id="_cid" name="_cid[0]"//change in select to 
class="_cid" name="_cid[]"//_cid[] will automatically increment 

id="_qty" name="_qty[0]"//same in input 
class="_qty" name="_qty[]" 

//you should also change 
id="item1_total" 
class="item1_total" 

Javascript

function addRow(){ 
    var new_id = $("#total_row").val() + 1; 
    $("#total_row").val(new_id); 

    var $currentRow = $("#testTable tr:first").clone(); 
    $("#testTable").append(currentRow); 

    $currentRow.attr(id,"row_"+new_id); 
    $currentRow.find('select').attr('onclick',"changeCustomCategory(this.value,'"+new_id+"')"); 
    $currentRow.find('._qty').attr('onchange','_doVariation('+new_id+')'); 
} 

Answer 2

Убрана инлайн связывания и связанного с элементом в логике. Началось изменение первой вещи, которую вы пытались сделать с регулярным выражением. Вы можете видеть, как вам нравится этот подход.

jQuery(function($) { 
 
    //cache selectors 
 
\t var $total_row = $("#total_row"), 
 
\t \t $table = $("#testTable"); 
 
\t 
 
\t $(".addRow").on('click', function addRow() { 
 
     var total_row = $total_row.val(), 
 
\t \t \t _previousId = parseInt(total_row), 
 
\t \t \t new_id = _previousId + 1; 
 
\t \t 
 
\t \t $total_row.val(new_id); 
 
\t \t 
 
\t \t var $new_row = $table.find("tr").eq(0).clone(); 
 
\t \t 
 
\t \t $new_row.attr("id", "row_"+ new_id); 
 
\t \t $new_row.find("select").attr("name", "_cid["+ (new_id - 1) +"]"); 
 
\t \t 
 
\t \t $table.append($new_row); 
 
\t \t 
 

 

 
//  currentRow.innerHTML = currentRow.innerHTML.replace('_cid\[' + new_id - 1 + '\]', '_cid[' + new_id + ']'); 
 
//  currentRow.innerHTML = currentRow.innerHTML.replace(new RegExp("changeCustomCategory(this.value,'" + _previousId + "')", "g"), 'changeCustomCategory(this.value,' + new_id + ')'); 
 
//  currentRow.innerHTML = currentRow.innerHTML.replace('_doVariation(' + _previousId + ')', '_doVariation(' + new_id + ')'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<table id="testTable"> 
 
    <tr id="row_1"> 
 
     <td> 
 
      <select onchange="changeCustomCategory(this.value,'1');" id="_cid" name="_cid[0]"> 
 
       <option value="">--Select Product--</option> 
 
       <option value="test">Test</option> 
 
      </select> 
 
      <input type="text" onchange="_doVariation(1);" value="1" id="_qty" name="_qty[0]" /> 
 
      <input type="text" class="textfield" value="0.00" id="item1_total" name="item1_total" readonly> 
 
     </td> 
 
    </tr> 
 

 

 
</table> 
 

 
<input type="hidden" value="1" id="total_row"> 
 
<input type="button" value="Add Row" class="addRow">

Answer 3

Вы можете выполнить изменения, как:

//.... 

var newRow = jQuery("#"+ table.rows[0].id).clone().appendTo("#testTable"); 

//Change1 
newRow.attr('name', '_cid['+new_id+']'); 

//Change2: 
newRow.find('select').removeAttr('onchange').change(function() { 
    changeCustomCategory(this.value, new_id); 
}); 

//Change3:   
newRow.find('input:first').removeAttr('onchange').change(function() { 
    _doVariation(new_id); 
}); 

//.... 

Демо:https://jsfiddle.net/4c0v2d50/

Answer 4

function addRow(){ 
    var total_row = parseInt(document.getElementById("total_row").value); 
    var _previousId = parseInt(total_row); 
    var new_id = parseInt(total_row) + 1; 

    var total_row = $("#total_row").val(); 
    var _previousId = parseInt(total_row); 
    var new_id = parseInt(total_row) + 1; 
    $("#total_row").val(new_id); 
    var currentRow = $("#testTable tr:first").clone(); 
    $("#testTable").append(currentRow); 
    $(currentRow).find('#_cid').attr("name","_cid["+new_id+"]"); 
    $(currentRow).find('#_qty').attr("name","_qty["+new_id+"]"); 
    $(currentRow).attr("id","row_"+new_id); 
    $(currentRow).find('#_cid').attr('onclick',"changeCustomCategory(this.value,'"+new_id+"')"); 
    $(currentRow).find('#_qty').attr('onclick','_doVariation('+new_id+')');} 

Answer 5

Working fiddle.

1. Атрибут id должен быть уникальным, чтобы вы могли заменить повторяющиеся из них на class attributen Например:

   <select class="_cid" name="_cid[0]" > 
   <input type="text" value="1" class="_qty" name="_qty[0]"/> 
   

2. Лучше, если вы могли бы избежать инлайн-событие onclick() и переопределение параметров в каждом клонировать и определять общее событие один раз, и он будет работать для всего элемента, например:

   $('body').on('change','._cid', function(){ 
       //You code here 
   }) 
   

3. Вам не нужно увеличивать имена, которые только оставить знаки массива пустым [] и будет увеличиваться автоматически, например:

   <select class="_cid" name="_cid[]" > 
   <input type="text" value="1" class="_qty" name="_qty[]"/> 
   

Надеется, что это помогает.

---

$(function(){ 
 

 
    $('body').on('change','._cid', function(){ 
 
    var id_number = $(this).parents('tr').attr('id').split('_')[1]; 
 
    changeCustomCategory($(this).val(),id_number); 
 
    }) 
 

 
    $('body').on('change','._qty', function(){ 
 
    var id_number = $(this).parents('tr').attr('id').split('_')[1]; 
 
    _doVariation(id_number); 
 
    }) 
 

 
}) 
 

 
function addRow() 
 
{ 
 
    var new_id = $('.row').length + 1; 
 

 
    var new_row = $("#testTable tr:first").clone().attr('id','row_'+new_id); 
 

 
    $("#testTable").append(new_row); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="testTable"> 
 
    <tr id="row_1" class="row"> 
 
    <td> 
 
     <select class="_cid" name="_cid[]" > 
 
     <option value="">--Select Product--</option> 
 
     <option value="test">Test</option> 
 
     </select> 
 

 
     <input type="text" value="1" class="_qty" name="_qty[]"/> 
 
     <input type="text" class="textfield" value="0.00" class="item1_total" name="item1_total" readonly> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<input type="button" onclick="addRow()" value="Add Row">