Table Add More Row using javascript

Question

I am adding dynamic row to table. But when adding new row, I want to replace some string on new row. But it is not working.

<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">

This is my HTML code.

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+')'); 
}

name="_qty[0]" name="_cid[0]" This both fields are not replace into new row — Dharmesh Hariyani
– Dharmesh Hariyani, Commented Jun 29, 2016 at 11:51

Ismail RBOUH · Accepted Answer · 2016-06-29 12:05:29Z

1

You can perform your changes as the following:

//....

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

//....

Demo: https://jsfiddle.net/4c0v2d50/

answered Jun 29, 2016 at 12:05

Ismail RBOUH

10.5k2 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hozeis · Accepted Answer · 2016-06-29 12:16:41Z

I would suggest sticking to jquery functions and not mixing too much with plain javascript. It makes it easier to code and follow.

I believe this is what your trying to do:

change 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+')');
}

Taplar · Accepted Answer · 2016-06-29 12:04:30Z

Removed the inline binding and bound to the element in the logic. Started changing the first thing you were trying to do with a regex. You can see how you like this approach.

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


//        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">

Dharmesh Hariyani · Accepted Answer · 2016-06-29 12:15:23Z

0

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+')');}

answered Jun 29, 2016 at 12:15

Dharmesh Hariyani

3941 silver badge14 bronze badges

1 Comment

Zakaria Acharki Over a year ago

That will works but It could be clean/valide and better than this, check my answer.

Zakaria Acharki · Accepted Answer · 2016-06-29 12:32:30Z

Working fiddle.

The id attribute should be unique so you could replace the duplicate ones by class attributen example :
```
<select class="_cid" name="_cid[0]" >
<input type="text" value="1" class="_qty" name="_qty[0]"/>
```
Better if you could avoid the inline-event onclick() and the overriding of parameters in every clone and define a general event one time and it will work for all the element, example :
```
$('body').on('change','._cid', function(){
    //You code here
})
```
You don't need to increment the names you have just to leave the array signs empty [] and it will be incremented automatically, example :
```
<select class="_cid" name="_cid[]" >
<input type="text" value="1" class="_qty" name="_qty[]"/>
```

Hope this helps.

$(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">

Collectives™ on Stack Overflow

Table Add More Row using javascript

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related