如何使用 Jquery 从用户输入制作表格内容?

我想制作一个包含用户输入并对其进行分类的表，我确实初始化了此代码，但是如果您进行了许多输入并以奇怪的方式显示，则内容会保留在一边我尝试了很多其他方法，同样的问题发生了帮助，请帮助

$(document).ready(function(){  
$("#btn").click(function(){
$("#tbody").append("<tr></tr>");
$("tr").append("<td></td>");
$("td").append($("#txt").val());
$("#tbody").append("<tr></tr>");
$("tr").append("<td></td>");
$("td").append($("#txt2").val());
$("#tbody").append("<tr></tr>");
$("tr").append("<td></td>");
$("td").append($("#txt3").val());
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button id="btn">add table element</button>
<br>
<br>
<input type="text" id="txt" placeholder="Nom"  >
<br>
<br>
<input type="text" id="txt2" placeholder="Prenom">
<br>
<br>
<input type="Number" id="txt3" placeholder="Nº dossier">
<br>
<br>
<table border="1">
	
<thead>
<th>Nom</th>
<th>Prenom</th>
<th>Nº dossier</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

试试这个：

$(function(){

$('#add').on('click',function(){

var field1=$('#field1').val();
var field2=$('#field2').val();
var field3=$('#field3').val();

var data=`<tr><td>`+field1+`</td>`+
`<td>`+field2+`</td>`+
`<td>`+field3+`</td></tr>`;
$('#table').append(data);

});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='field1' />
<input type='text' id='field2' />
<input type='text' id='field3' />
<button id='add' >Add </button>
<table id='table'>
<tr>
<th>Field 1 </th>
<th>Field 2 </th>
<th>Field 3 </th>
</tr>
</table>

当你使用 jquery 选择器$("tr")或$("td")时，你分别选择所有(不是最后一个(tr和td标签。如果要添加包含三个td的tr，则应创建 1 tr、3 td，在每个 td 中附加数据，然后在 tr 中附加每个 td，然后在页面上附加 tr。您应该为 tbody 标签添加 id 以进行选择，例如#tbody(https://developer.mozilla.org/en/docs/Web/CSS/CSS_Selectors( 例如：

$(document).ready(function(){  
$("#btn").click(function(){
var raw = $('<tr></tr>');
var ceil1 = $('<td></td>').append($("#txt").val());
var ceil2 = $('<td></td>').append($("#txt2").val());
var ceil3 = $('<td></td>').append($("#txt3").val());
raw.append(ceil1).append(ceil2).append(ceil3);
$('#tbody').append(raw);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button id="btn">add table element</button>
<br>
<br>
<input type="text" id="txt" placeholder="Nom"  >
<br>
<br>
<input type="text" id="txt2" placeholder="Prenom">
<br>
<br>
<input type="Number" id="txt3" placeholder="Nº dossier">
<br>
<br>
<table border="1">
<thead>
<th>Nom</th>
<th>Prenom</th>
<th>Nº dossier</th>
</thead>
<tbody id="tbody"></tbody>
</table>
</body>

理解您的问题有点困难，但我想您想将表单数据添加到表中。我会这样做。请注意，我已经在您的表中添加了一个 id。我还使用反引号'不是常规撇号'符号从表单中获取值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="btn">add table element</button>
<br><br>
<input type="text" id="txt" placeholder="Nom">
<br><br>
<input type="text" id="txt2" placeholder="Prenom">
<br><br>
<input type="Number" id="txt3" placeholder="Nº dossier">
<br><br>
<table id="myTable" border="1">
<thead>
<tr>
<th>Nom</th>
<th>Prenom</th>
<th>Nº dossier</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#myTable").append(`
<tr>
<td>${$("#txt").val()}</td>
<td>${$("#txt2").val()}</td>
<td>${$("#txt3").val()}</td>
</tr>`)
});
});
</script>
</body>

相关内容

最新更新

热门标签：