Question

我有以下代码调用OBJECT添加+10然后对结果进行排序，目前正在回归：

b b b 20
c c c 13
a a a 11
d d d 10

这是正确的排序，值是正确的。但是，我需要根据代码段将完整表包含在这些结果中。

＆＃13;

<div class="box"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">20</td>
  </tr>
</table>
  </div>
<div class="box">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">13</td>
  </tr>
</table>
  </div>
<div class="box">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">11</td>
  </tr>
</table>
  </div>
<div class="box">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">10</td>
  </tr>
</table>
</div>

＆＃13;

如何获取SORT数组返回的完整HTML表数据？也许还有更好的方法吗？

<!--HTML ===-->

<div id="containerSort">
  <!--HTML-->
  <div class="box">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66"><object>001</object></td>
  </tr>
</table>

  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99"><object>10</object></td>
  </tr>
</table>
  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933"><object>03</object></td>
  </tr>
</table>
  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99"><object>0</object></td>
  </tr>
</table>
  </div>
<div id="increase"></div>

</div>

    <script type='text/javascript'>

    $(document).ready(function() {
    $("#increase").trigger("click");
});

// Assign function as eventListener
$("#increase").click(computeAndUpdateValue);

// Wrapper function
function computeAndUpdateValue() {
    var valArr = getValues();
    valArr = addNumber(valArr);
    valArr = sortValues(valArr);
    createAndRenderHTML(valArr, "#containerSort");
}

function getValues() {
    var returnArray = [];
    $("div.box").each(function(id, el) {
        returnArray.push($(el));
    });
    return returnArray;
}

function addNumber(arr) {
    return arr.map(function(item) {
        var $object = $(item).find("object");
        $object.text(parseInt($object.text(), 10) + 10);
        return item;
    });
}

function sortValues(arr) {
    return arr.sort(function(a, b) {
        a = parseInt($(a).find("object").text(), 10);
        b = parseInt($(b).find("object").text(), 10);
        return a > b ? -1 : a < b ? 1 : 0;
    });
}

function createAndRenderHTML(arr, el) {
    var _html = arr.map(function(item) {
        return "<div class='box'> <object>" + item.text() + "</object></div>"
    });
    $(el).empty().append(_html);
}

  </script>

Answer 1

我能够使用以下简单代码解决整个问题

$(window).on('load', function() {
$(document).ready(function() {

tinysort("div",{order:"desc"});

} );
})

Tinysort模型自动假设10大于2

HATS off to tinysort：）

如何获取SORT数组返回的完整HTML表数据？

1 个答案: