时间戳

首页 > 解决方案 > 如何使用 Jquery 从用户输入中制作表格内容？

javascript - 如何使用 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>

标签： javascriptjqueryhtmlhtml-tableuser-input

解决方案

试试这个：

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

推荐阅读