将数据输入表格并自动排序答案

【问题标题】：Input data into table and auto sort将数据输入表格并自动排序
【发布时间】：2017-02-12 05:04:06
【问题描述】：

我正在尝试解决这个简单的问题。我希望用户能够输入数据，然后数据自动按升序排序到表中已经提交的任何内容。我被困在自动分类部分。这是我的 JS 小提琴 http://jsfiddle.net/6n4kugbp/

HTML

<input id="id_name" name="numid"/>
<input id="id_age" name="price"/>
<button id="add_btn">click</button>

<table border="1" class="mytab"></table>

jQuery

$("#add_btn").on('click', function(e) {
    e.preventDefault();
    var name = $('#id_numid').val(), 
        age = $('#id_price').val();

    $('<tr><td>'+numid+'</td><td>'+price+'</td></tr>').appendTo( $('.mytab') );
});

【问题讨论】：

标签： jquery html sorting html-table

【解决方案1】：

试试这个 - 希望它有所帮助，因为我了解您希望按年龄按升序对表格数据进行排序，然后下面的代码可以工作。

使用.sort() 方法。

如果您希望按名称排序然后只需替换

  data.sort(function(a, b) {
    return a.age - b.age;
  });

到

  data.sort(function(a, b) {
     if(a.name < b.name ) return -1;
     if(a.name > b.name ) return 1;
     return 0;
  });

var data = [];

$("#add_btn").on('click', function(e) {
  e.preventDefault();
  var name = $('#id_name').val(),
    age = $('#id_age').val();

  var array = {
    "name": name,
    "age": age
  };

  data.push(array);

  data.sort(function(a, b) {
    return a.age - b.age;
  });

  $('.mytab').html('');
  $.each(data, function(index, value) {
    $('<tr><td>' + value.name + '</td><td>' + value.age + '</td></tr>').appendTo($('.mytab'));
  });

});

table {
  border-collapse: collapse;
  width: 100%;
}
table,
th,
td {
  border: 1px solid black;
}
th {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="id_name" name="name" placeholder="Enter a name here..." />
<input id="id_age" name="age" placeholder="Enter age here..." />
<button id="add_btn">Add</button>
<hr/>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody class="mytab"></tbody>
</table>

【讨论】：

【解决方案2】：

如果我没有误解你的问题，你可以试试这个：

更新：

我在添加新行时更新了自动排序的代码。您可以通过配置defaultSortColIndex 值来更改默认排序列。

$(function() {
  var defaultSortColIndex = 0;
  
  function sortTheTable() {
    var table = $('table');
    
    $('th')
      .wrapInner('<span title="sort this column"/>')
      .each(function() {
        var th = $(this),
          thIndex = th.index(),
          inverse = false;

        th.click(function() {
          table.find('td').filter(function() {
            return $(this).index() === thIndex;
          }).sortElements(function(a, b) {
            return $.text([a]) > $.text([b]) ?
              inverse ? -1 : 1 :
              inverse ? 1 : -1;
          }, function() {
            return this.parentNode;
          });

          inverse = !inverse;
        });
      });
    
    $('th').eq(defaultSortColIndex).trigger('click');
  };

  $('button#add_btn').on('click', function() {
    var sName = $('input#name').val();
    var sAge = $('input#age').val();

    if (isNaN(sAge)) {
      alert('Invalid age number.');
      return;
    }

    var sTr = '<tr>';
    sTr += '<td>' + sName + '</td>';
    sTr += '<td>' + sAge + '</td>';
    sTr += '</tr>';

    $('table').append(sTr);

    sortTheTable();
  });
});

table {
  width: 100%;
}

.orderable {
  cursor: pointer;
  color: #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>

<input id="name" name="name"/>
<input id="age" name="age" />
<button id="add_btn">Add</button>

<table border="1" class="mytab">
  <tr>
    <th id="name" class="orderable">Name</th>
    <th id="age" class="orderable">Age</th>
  </tr>
</table>

【讨论】：

【解决方案3】：

像这样的

$("#add_btn").on('click', function(e) {
e.preventDefault();
var name = $('#id_numid').val(), 
    age = $('#id_price').val();
$('<tr><td>'+numid+'</td><td>'+price+'</td></tr>').appendTo( $('.mytab') );
sortTable($('.mytab'), "asc");
});

function sortTable(table, order) {
var asc   = order === 'asc',
    tbody = table.find('tbody');

tbody.find('tr').sort(function(a, b) {
    if (asc) {
        return $('td:first', a).text().localeCompare($('td:first', b).text());
    } else {
        return $('td:first', b).text().localeCompare($('td:first', a).text());
    }
}).appendTo(tbody);
}

【讨论】：