Question

我想根据总数计算并填写下图中的排名。如何使用js / jquery实现这一目标？。

我已经使用HTML手动（动态地）创建了表格。我也有按钮来生成排名（我知道该怎么做）。我只是希望有一个功能或方法来为我的专栏添加排名。

所以等级应该是有序的（1,2,2,3）。

<table id="table" class="table table-stripe table-bordered">
                    <thead>
                        <tr>
                            <td class="d-none">ID</td>
                            <td>Name</td>
                            <td>Crit1</td>
                            <td>Crit2</td>
                            <td>Crit3</td>
                            <td>Crit4</td>
                            <td>Crit5</td>
                            <td>Total</td>
                            <td>Rank</td>
                        </tr>
                    </thead>
                    <tbody>
                                                    <tr>
                                <td class="d-none">2</td>
                                <td>aaaa</td>
                                <td>20</td>
                                <td>0</td>
                                <td>50</td>
                                <td>0</td>
                                <td>0</td>
                                <td class="total"></td>
                                <td class="Rank"></td>

                            </tr>
                                                    <tr>
                                <td class="d-none">3</td>
                                <td>Greggggg</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="total"></td>
                                <td class="Rank"></td>

                            </tr>
                                                    <tr>
                                <td class="d-none">4</td>
                                <td>Jjjjoohhn</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="total"></td>
                                <td class="Rank"></td>

                            </tr>
                                                    <tr>
                                <td class="d-none">5</td>
                                <td>asdada</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td class="total"></td>
                                <td class="Rank"></td>

                            </tr>
                                            </tbody>
                </table>

任何帮助将不胜感激。

Answer 1

您必须通过获取所有值，排序和删除重复项来组织总分。

您可以按$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);

指定排名值

您可以执行以下操作：

$(function() {
  //Get all total values, sort and remove duplicates
  let totalList = $(".total")
    .map(function() {return $(this).text()})
    .get()
    .sort(function(a,b){return a - b })
    .reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])

  //Assign rank
  totalList.forEach((v, i) => {
    $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
  <thead>
    <tr>
      <td class="d-none">ID</td>
      <td>Name</td>
      <td>Crit1</td>
      <td>Crit2</td>
      <td>Crit3</td>
      <td>Crit4</td>
      <td>Crit5</td>
      <td>Total</td>
      <td>Rank</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="d-none">2</td>
      <td>aaaa</td>
      <td>20</td>
      <td>0</td>
      <td>50</td>
      <td>0</td>
      <td>0</td>
      <td class="total">80</td>
      <td class="Rank"></td>

    </tr>
    <tr>
      <td class="d-none">3</td>
      <td>Greggggg</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="total">65</td>
      <td class="Rank"></td>

    </tr>
    <tr>
      <td class="d-none">4</td>
      <td>Jjjjoohhn</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="total">65</td>
      <td class="Rank"></td>

    </tr>
    <tr>
      <td class="d-none">5</td>
      <td>asdada</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td class="total">50</td>
      <td class="Rank"></td>
    </tr>
  </tbody>
</table>

您甚至可以缩短

$(".total")
    .map(function(){return $(this).text()})
    .get()
    .sort(function(a,b){return a - b })
    .reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
    .forEach((v,i)=>{
        $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
    });

Jquery或Javascript根据总计创建排名列

1 个答案: