Question

我有这个：

     <form>
     Input name: <input type="text"/><br/>
     Input last name: <input type="text"/><br/>
     Your age: <input type="number"/><br/>
     Your points: <input type="number"/><br/>
     Overral: <input type="number"/><br/>
     <button type="submit">Submit</button><br>`

我想做的是，按您的意愿，我有按钮汇总，当我单击它以使表单编号列表时，我想这样做。像这样：

标记
威廉姆斯 ....

Answer 1

尝试一下，它需要所有输入并追加到列表中

$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$('#a').append('<ol><li>'+$("#name").val()+'</li><li>'+$("#last").val()+'</li><li>'+$("#age").val()+'</li><li>'+$("#points").val()+'</li><li>'+$("#over").val()+'</li></ol>')
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
     Input name: <input type="text" id="name"/><br/>
     Input last name: <input type="text" id="last"/><br/>
     Your age: <input type="number" id="age"/><br/>
     Your points: <input type="number" id="points"/><br/>
     Overral: <input type="number" id="over"/><br/>
     <button type="submit">Submit</button><br></form>
     <div id="a"></div>

Answer 2

冒着对新来者来说过于复杂和冗长的风险（特别是与5行jQuery相比）-这是一种简单的JavaScript方法，对每个步骤的进行了一些解释。

将人员添加到列表中：

<!-- 
  1 ) Add an ID so we can identify the form
-->
<form id="person-add">
     Input name: <input type="text"/><br/>
     Input last name: <input type="text"/><br/>
     Your age: <input type="number"/><br/>
     Your points: <input type="number"/><br/>
     Overral: <input type="number"/><br/>
     <!-- 2 ) Add an onclick event to run a JavaScript function.-->
     <button onclick="addPerson(event);">Submit</button><br>
</form>

<!-- 3 ) Add the list we'll add people to. This has an ID as well.-->
<ol id="person-list">
</ol>

<!-- 4 ) Then the JavaScript function that activates when the button is pressed. -->
<script type="text/javascript">

  // It accepts a parameter, 'event' - this is passed from the onclick event.
  function addPerson(event){
    // By default, clicking a button in a form submits the form to the server.
    // Since we're using JavaScript to create the list, we'll prevent that from happening.
    event.preventDefault();

    // Using querySelectorAll, we get all the input fields within '#person-add'
    var person_fields = document.querySelectorAll('#person-add input');

    // Here we get the #person-list element we'll be adding the person to.
    var person_list = document.getElementById('person-list');
    
    // Create a list item for the person, but don't put it in the list yet.
    var person = document.createElement('li');
    
    // Loop through the fields and add their value list item.
    for( var field = 0; field < person_fields.length; field++ ) {
    
      // Add the value of the field to the person list item.
      person.innerText += person_fields[field].value;
      
      // If the next item isn't the end of the list, we'll add a space.
      if( field + 1 !== person_fields.length ){
        person.innerText += ' ';
      }
    }
    
    // Lastly, add the person to the person_list.
    person_list.appendChild(person);
  }
</script>

按高分排序列表：

如果要对此进行扩展，一件事是将字段名称添加到输入字段，这样您可以构建人员数组，然后按得分最高的人顺序列出他们。

我不会告诉您确切的实现方法-但这是一些提示，可以帮助您入门：

设置字段名称

<input type="number" name="points"/>

创建人员列表

// Create an empty list.
var people = [];

创建对象来代表人物

// Create an empty object.
var person = {};

向对象添加值

// Add a property matching the field name with the field value.
person[ person_fields[field].getAttribute('name') ] = person_fields[field].value;

将对象添加到列表

// Add the person to the list of people.
people.push( person );

按从最高点到最低点的顺序绘制列表
Check out Mozilla docs for a breakdown of JavaScript for array sorting.

function updateList(){

  // Here we get the #person-list element we'll be adding the person to.
  var person_list = document.getElementById('person-list');

  // Empty the person_list as we're redrawing it in order.
  person_list.innerHTML = '';

  // Sort the people list by highest points.
  people.sort( function( person1, person2 ) {
    return person2.points - person1.points;
  } );

  // Loop through the fields and add their value list item.
  for( var position in people ) {

    // Create a list item for the person, but don't put it in the list yet.
    var list_item = document.createElement('li');

    // Get the person.
    var person = people[position];

    // Add the value of the field to the person list item.
    list_item.innerText += person.firstname + ' ' + person.lastname;
    list_item.innerText += ' ( ' + person.points + ' points )';

    // Add the list item to the person_list.
    person_list.appendChild(list_item);

  }

}

希望这会有所帮助！

如何在HTML中显示表单中的元素

2 个答案:

将人员添加到列表中：

按高分排序列表：