0

文本框中显示三个字段（名字、姓氏和年龄）。每个字段都显示在单独的 div 中。有4条记录。单击每个字段上方的排序按钮时，应根据字段的数据类型对 div 记录进行排序，并应显示在 HTML 页面中。

我尝试了此链接中的解决方案

我不能使用它，因为记录显示在 div 内的文本框中。

 <div id="content">
    <div>
      <div class="price"><input type="text" class="pri" value="120"/></div>
      <div class="dateDiv">2012-05-09 20:39:38.0</div>
      <div class="distance">20 mile</div>
    </div>

    <div>
      <div class="price"><input type="text" class="pri"  value="123"/></div>
      <div class="dateDiv">2012-05-10 20:39:38.0</div>
      <div class="distance">30 mile</div>
    </div>

    <div>
        <div class="price"><input type="text" class="pri" value="100" /></div>
      <div class="dateDiv">2012-05-11 20:39:38.0</div>
      <div class="distance">50 mile</div>
    </div>

    <div>
      <div class="price"><input type="text" class="pri" value="124"/></div>
      <div class="dateDiv">2012-05-12 20:39:38.0</div>
      <div class="distance">60 mile</div>
     </div>
   </div>

我怎样才能在javascript中做到这一点？

4

3 回答 3

0

你可以使用knockoutjs来做类似的事情。

例如，html：

<div id="content" data-bind="foreach: lines">
    <div class="fname"><input type="text class="pri" data-bind="value: fname"/></div>
    <div class="lname" data-bind="text: lname"/>
    <div class="age" data-bind="text: age"/>
</div>

Javascript：

function EachDivViewModel(line)
{
   this.fname = line.fname;
   this.lname = line.lname;
   this.age = line.age;
}

function YourViewModel()
{
   var self = this;
   self.lines = ko.observableArray([]); // this array will contain elements of EachDivViewModel type

   self.handlerForYourSortButtongs = function() {
      // Code here to sort the array based on the button clicked
      // The UI will automatically get updated as you reorder the elements in the lines array
   }
}


$(document).ready(function() {
   var yourViewModelInstance = new YourViewModel();
   // Code to get the lines here
   ko.applyBindings(yourViewModelInstance);
});
于 2012-08-30T11:44:44.253 回答
0

使用jquery.tinysort.min.js看这个演示

也见这个

于 2012-08-31T12:34:50.807 回答
-2

可以使用tablesorter来完成。

希望这会帮助你。

于 2012-08-30T11:48:59.797 回答