jQuery如何仅一次将数据附加到循环中

Question

我使用循环，并通过按钮将数据添加到表中。 因此，每次它为我创建5个单元格，但我只需要在单击按钮后一次添加数据即可。

代码：

$('.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>

如您所见，每次单击“确定”后，我都有5行，但从每个输入字段中我只需要一行。

Answer 1

只需执行if条件if(arrNumber[i]){，检查值是否存在。

$('.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>

Answer 2

您可以尝试以下操作：

$('.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>');
  })
});

请注意，我已添加$('.changeoverTable tbody tr').remove();来删除表中的旧记录。

也没有理由为此使用Array。

演示

$('.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>

Answer 3

尝试一下，希望它对您有用。

$('.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>

Answer 4

尝试一下：

$('.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; 
    })
});