0

テキストボックスには、3つのフィールド（名、姓、年齢）が表示されます。各フィールドは別々の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

ノックアウトjsを使用して、そのようなことを行うことができます。

たとえば、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 に答える