CODEWITHSUNDEEP
javascriptjquery
Rav
Rav

Reputation: 1387

Javascript: Doesn't insert on right index row table

I tried adding a certain number of rows (depending on the number inputted on the textbox) under the row of which button was clicked. It works fine on the first row but it's not working when I do it on the second row button (it keeps on inserting under the first row).

Here's the fiddle: https://jsfiddle.net/L4zffok1/

$('.add-rows').click(function(){

    var $bx_id;
    var $num_rows;
    var table = document.getElementById("myTable");
    $bx_id = this.id;
    $num_rows = $('#num_boxcodes_'+$bx_id).val();

    for (i = 0; i < $num_rows; i++) {
        var row = table.insertRow($bx_id);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        cell1.innerHTML = '------';
        cell2.innerHTML = '------';
        cell3.innerHTML = '------';
        cell4.innerHTML = '------';
        cell5.innerHTML = '------';
        cell6.innerHTML = '------';
        cell7.innerHTML = '------';
        cell8.innerHTML = '------';
    }
});

Upvotes: 0

Views: 568

Answers (4)

StackSlave
StackSlave

Reputation: 10627

I'm willing to bet none of these answers work like you want, even if you chose one. Check this out: https://jsfiddle.net/L4zffok1/4/

You are going to need to delegate Events to the new Elements, as well as turn off any Events previously attached. Recursion is the best solution for this.

function retardedAddRow(){
  var table = document.getElementById('myTable');
  $('.add-rows').each(function(c, e){
    var t = $(e);
    t.off('click');
    t.click(function(){
      var val = t.prev().val(), row, cell;
      for(var n=0; n<val; n++){
        row = table.insertRow(c+2+n);
        for(var i=0,l=8; i<l; i++){
          cell = row.insertCell(i);
          cell.innerHTML = '------'; // bad technique
          if(i === 4){
            cell.innerHTML = "<input type='text' size='10' /><button type='button' class='btn btn-success btn-inline add-rows'>OK</button>";
          }
        }
      }
      retardedAddRow();
    });
  });
}
$(function(){
  retardedAddRow();
});

Upvotes: 0

Jameson the dog
Jameson the dog

Reputation: 1806

Since you're already using jQuery, why not use it do create the new row based on the last one?

$(document).ready(function () {
$('.add-rows').click(function(){
   var $bx_id;
   var $num_rows;
   var $table = $("#myTable");
   $num_rows = $(this).parent().find('input').val();
   for(i = 0; i < $num_rows; i++){
       var $newRow = $('<tr>');
       $newRow.html('<td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td><td>---------</td>');
       $table.append($newRow)
   }
});

})

Upvotes: 0

mbadeveloper
mbadeveloper

Reputation: 1270

I changed the id of the input control to be num_boxcodes_ and the function to add the rows and its work now:

$(document).ready(function () {
	$('.add-rows').click(function(){
		var $bx_id;
		var $num_rows;
		var table = document.getElementById("myTable");		
      	$num_rows = $('#num_boxcodes_'+this.id).val();
        $bx_id = $(this).closest('tr').index() + 2;

		for (i = 0; i < $num_rows; i++) {
			var row = table.insertRow($bx_id);
			var cell1 = row.insertCell(0);
			var cell2 = row.insertCell(1);
			var cell3 = row.insertCell(2);
			var cell4 = row.insertCell(3);
			var cell5 = row.insertCell(4);
			var cell6 = row.insertCell(5);
			var cell7 = row.insertCell(6);
			var cell8 = row.insertCell(7);
			cell1.innerHTML = '------';
			cell2.innerHTML = '------';
			cell3.innerHTML = '------';
			cell4.innerHTML = '------';
			cell5.innerHTML = '------';
			cell6.innerHTML = '------';
			cell7.innerHTML = '------';
			cell8.innerHTML = '------';
		}
	});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="myTable">
			<thead>
				<tr class="success">
					<th>Column 1</th>
					<th>Column 2</th>
					<th>Column 3</th>
					<th>Column 4</th>
					<th>Column 5</th>
					<th>Column 6</th>
					<th>Column 7</th>
					<th>Column 8</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
					<td>
						<input type="text" size="10" id="num_boxcodes_2" />
						<button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button>
					</td>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
				<tr>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>
						<input type="text" size="10" id="num_boxcodes_3" />
				<button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button>
					</td>
					<td>Test2</td>
					<td>Test2</td>
					<td>Test2</td>
				</tr>
			</tbody>
		</table>

Upvotes: 1

Justinas
Justinas

Reputation: 43479

.insertRow expects that you pass index at witch put your new rows, but instead you only pass 2 or 3 (that's the ID's, ID name should not start with number). Try calculating new position instead.

$(document).ready(function() {
  $('.add-rows').click(function() {

    var $bx_id;
    var $num_rows;
    var table = document.getElementById("myTable");
    $bx_id = this.id;
    $num_rows = $('#num_rows_' + $bx_id).val();
    var rowIndex = $(this).closest('tr').index() + 2;
    var k = "00" + Math.floor(Math.random() * 100);
    k = k.substr(k.length - 2);

    for (i = 0; i < $num_rows; i++) {
      var row = table.insertRow(rowIndex);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      var cell7 = row.insertCell(6);
      var cell8 = row.insertCell(7);
      cell1.innerHTML = '----' + k;
      cell2.innerHTML = '----' + k;
      cell3.innerHTML = '----' + k;
      cell4.innerHTML = '----' + k;
      cell5.innerHTML = '----' + k;
      cell6.innerHTML = '----' + k;
      cell7.innerHTML = '----' + k;
      cell8.innerHTML = '----' + k;
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="myTable">
  <thead>
    <tr class="success">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>
        <input type="text" size="10" id="num_rows_2" />
        <button type="button" id="2" class="btn btn-success btn-inline add-rows">OK</button>
      </td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
      <td>
        <input type="text" size="10" id="num_rows_3" />
        <button type="button" id="3" class="btn btn-success btn-inline add-rows">OK</button>
      </td>
      <td>Test2</td>
      <td>Test2</td>
      <td>Test2</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions