CODEWITHSUNDEEP
javascriptjqueryhtml
qunz666
qunz666

Reputation: 310

jQuery how to append data in loop only one time

I work with loops and I add data in to table, from buttons. So each time it creates 5 cells for me, but I need to append data only one time after button click.

Code:

$('.next').on('click', function () {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    $('input[type=text]').each(function (i) {
        arrNumber.push($(this).val());
            $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); 
    })
});
body {
  background: #f5f5f5;
}

.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="text" placeholder="Enter number of data"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
<input type="text" placeholder="Enter number of nest"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
   <table class="changeoverTable hide">
                <thead>
                    <tr>
                        <th colspan="3">Table</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

As you can see, each time after click ok, i got 5 rows, but i need only one, from each input field.

Upvotes: 0

Views: 2848

Answers (4)

Nick
Nick

Reputation: 561

Try this, hope this will works for you.

$('.next').on('click', function () {
    $('.changeoverTable').show();
	var arrNumber = new Array();
	var test = $(this).prev('input').val();
	console.log('value', test);
	if(test != ''){
	    $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + test + '</td></tr>'); 
	}else{
		alert('empty data');
	}
});
body {
  background: #f5f5f5;
}

.hide {
  display: none;
}
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>C3.js</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<input type="text" placeholder="Enter number of data"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
<input type="text" placeholder="Enter number of nest"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
   <table class="changeoverTable hide">
        <thead>
            <tr>
                <th colspan="3">Table</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can try with this:

$('.next').on('click', function() {
  $('.changeoverTable').show();
  $('.changeoverTable tbody tr').remove();
  $('input[type=text]').each(function(i) {
    if ($(this).val()) $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + $(this).val() + '</td></tr>');
  })
});

Please notice that I've added $('.changeoverTable tbody tr').remove(); to remove the old records in the table.

Also there is no reason to use an Array for this.

Demo

$('.next').on('click', function() {
  $('.changeoverTable').show();
  $('.changeoverTable tbody tr').remove();
  $('input[type=text]').each(function(i) {
    if ($(this).val()) $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + $(this).val() + '</td></tr>');
  })
});
body {
  background: #f5f5f5;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="text" placeholder="Enter number of data"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
<input type="text" placeholder="Enter number of nest"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
<table class="changeoverTable hide">
  <thead>
    <tr>
      <th colspan="3">Table</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Upvotes: 1

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

Just do a if condition if(arrNumber[i]){ check if value exists.

$('.next').on('click', function () {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    $(".changeoverTable > tbody").html('');
    $('input[type=text]').each(function (i) {
    
        arrNumber.push($(this).val());
        if(arrNumber[i]){
            $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>'); 
            }
    })
});
body {
  background: #f5f5f5;
}

.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="text" placeholder="Enter number of data"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
<input type="text" placeholder="Enter number of nest"><button class="next">ok</button>
<input type="text" placeholder="Enter number of layers"><button class="next">ok</button>
   <table class="changeoverTable hide">
                <thead>
                    <tr>
                        <th colspan="3">Table</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

Upvotes: 2

Doflamingo19
Doflamingo19

Reputation: 1629

Try this:

$('.next').on('click', function () {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    var check=0;
    $('input[type=text]').each(function (i) {
if(check==0){
        arrNumber.push($(this).val());
            $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + 
arrNumber[i] + '</td></tr>');
}
 check=1; 
    })
});

Upvotes: 0

Related Questions