Question

我编写了以下代码，显示ajax成功的4列表。我希望根据4列对此表进行排序。我尝试使用在线提供的一些现成的.js文件，但没有成功。我怎样才能达到要求？

function Success(data)
{
    var obj;
    obj=JSON.parse(data);
    document.write("<html><head><title>Browser Service</title></head>");
    **document.write("<script type='text/javascript', src='sorttable.js'>
    <\/script>");**
    document.write("<body bgcolor=#E0DCDC>");
    document.write("<div id=example-table>");
    document.write("<h2 align=center>Browser Version Details</h2>");
    document.write("<table class='**sortable**', border-collapse=collapse, 
    width=60%, border=1px solid #ddd, align=center>");
    document.write("<tr bgcolor=#209D9D>");
    document.write("<th height=50>");
    document.write("Name");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number1");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number2");
    document.write("</th>");
    document.write("<th height=50>");
    document.write("Number3");
    document.write("</th>");
    document.write("</tr>");
    document.write("<br>");

    for(i=0; i<obj.length; i=i+4)
    {
        document.write("<tr bgcolor=#ffffff>"); 
        document.write("<td align=center>");    
        document.write(obj[i]);
        document.write("</td>");    
        document.write("<td align=center>");    
        document.write(obj[i+1]);
        document.write("</td>");
        document.write("<td align=center>");    
        document.write(obj[i+2]);
        document.write("</td>");
        document.write("<td align=center>");    
        document.write(obj[i+3]);
        document.write("</td>");
        document.write("</tr>");    
    }

    document.write("</table>");
    document.write("</div>");
    document.write("</body></html>");
}

</script>

我添加了一个随时可用的sorttable.js文件来实现此目的。我点击了链接：https://www.kryogenix.org/code/browser/sorttable/

Answer 1

我觉得要帮助你，因为我记得尝试为表创建标记，这可能很乏味。

一些指示：

尽量保持代码干燥（＆＃34;不要重复自己＆＃34;） - 因此使用循环可以最大限度地减少需要编写的代码量。
我在一个可重复使用的函数中创建了一个字符串中的所有标记，然后将它附加到页面而不是逐步写出来。
我使用CSS来设置表格的样式，而不是使用非常难以维护的内联样式。
我已将事件侦听器附加到th元素，这样当您单击不同的列时，数据将被排序，然后通过函数重新标记标记。请注意，由于标记更改，您必须将事件侦听器重新附加到th元素，以便您可以根据需要按其他列进行排序。

我将一些随机数据用于说明目的。

＆＃13;

var arr_data = [
  {
    "Name"   : "A",
    "Number1": 34,
    "Number2": 354,
    "Number3": 2
  },
    {
    "Name"   : "B",
    "Number1": 4356,
    "Number2": 45,
    "Number3": 57
  },
    {
    "Name"   : "C",
    "Number1": 9389,
    "Number2": 435,
    "Number3": 345
  },
    {
    "Name"   : "D",
    "Number1": 3,
    "Number2": 34,
    "Number3": 5645
  }
];


function buildTable( arr_data ){

  var html = '<table><thead><tr>';
  for( var key in arr_data[0] ){
    html += '<th>' + key + '</th>';
  }
  html += '</tr></thead><tbody>';
  
  arr_data.forEach(function(item){
    html += '<tr>';
    for( var prop in item ){
      html += '<td>' + item[prop] + '</td>';
    }
    html += '</tr>';
  });
  
  html += '</tbody></table>';
  return html;
}

(function init(){
  document.getElementsByClassName( 'table' )[0].innerHTML = buildTable( arr_data );
  attachEventListeners();
})();

function attachEventListeners(){
  var headers = document.getElementsByTagName( 'th' );
  for( var i = 0; i< headers.length; i++){
    var header = headers[i];
    header.addEventListener( 'click', function( event ){
      arr_data.sort( dynamicSort( this.innerHTML ) );
      document.getElementsByClassName( 'table' )[0].innerHTML = buildTable( arr_data );
      attachEventListeners();
    });
  }
}

// borrowed from https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript
function dynamicSort(property) {
  var sortOrder = 1;
  if(property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function (a,b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
}

＆＃13;

table {
  border: 1px solid #dddddd;
  width: 60%;
  border-collapse: collapse;
}

thead tr {
  background-color: #209d9d;
  cursor: pointer;
}

thead tr th:hover {
  background-color: #1c8d8d;
}

tr {
  height: 50px;
}

th,
td {
  text-align: center;  
}

＆＃13;

<div class="table"></div>

＆＃13;

对使用JavaScript中的document.write（）创建的表进行排序

1 个答案: