Javascript 在表格中排序复选框(选中和未选中)

发布于09月17日

我想在单击X时对我的复选框进行排序:

JS对我的复选框进行排序(选中和取消选中)？

我不知道该怎么写.请帮帮忙. 以下代码是borrow 的. 价格和库存值将使用路由从其他JS文件传递.

但现在我让它变得简单，因为我想知道如何对复选框进行排序.

 var sortedPrice = false;

    function sortPrice() {
        $('#myTable').append(
        $('#myTable').find('tr.item').sort(function (a, b) {
            var td_a = $($(a).find('td.sortPrice')[0]);
            var td_b = $($(b).find('td.sortPrice')[0]);
            if(sortedPrice){
                if(td_a.html() == 'Free') return -1;
                return td_b.html().replace(/\D/g, '') - td_a.html().replace(/\D/g, '');
            }else{
                if(td_a.html() == 'Free') return 1;
                return td_a.html().replace(/\D/g, '') - td_b.html().replace(/\D/g, '');
            }
        })
    );
    if(sortedPrice) sortedPrice = false;
    else sortedPrice = true;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="myTable">
        <tr>
          <th onclick="sortPrice()">Price</th>
          <th>Stock</th>
          <th>%</th>
          <th>X</th>
        </tr>
        <tr class="item">
          <td class="sortPrice">1</td>
          <td>1</td>
          <td>2</td>
          <td><input type="checkbox" value="1"></td>
        </tr>
        <tr class="item">
          <td class="sortPrice">4</td>
          <td>3</td>
          <td>1</td>
          <td><input type="checkbox" value="2"></td>
        </tr>
        <tr class="item">
          <td class="sortPrice">7</td>
          <td>4</td>
          <td>6</td>
          <td><input type="checkbox" value="3"></td>
        </tr>
        <tr class="item">
          <td class="sortPrice">2</td>
          <td>7</td>
          <td>8</td>
          <td><input type="checkbox" value="4"></td>
        </tr>
        <tr class="item">
          <td class="sortPrice">3</td>
          <td>4</td>
          <td>2</td>
          <td><input type="checkbox" value="5"></td>
        </tr>
</table>

const {compare} = new Intl.Collator(undefined, {numeric: true}); function sortSecondByFirst(pairs) { const sorted = [...pairs].sort(([a], [b]) => compare(a, b)) .map(([,a]) => a); if (pairs.every(([,a], i) => a === sorted[i])) { sorted.reverse(); // Was already sorted } return sorted; } $("th", "#myTable").click(function () { sortColumn($(this).index()); }); function sortColumn(colIdx) { const $cells = $(`tr > td:nth-child(${colIdx+1})`, "#myTable"); $("#myTable").append( sortSecondByFirst($cells.get().map((cell) => { const $input = $('input[type=checkbox]', cell); const value = $input.length ? $input.prop("checked") : $(cell).text(); return [ value, $(cell).parent() ]; })) ); }

Javascript 在表格中排序复选框(选中和未选中)

我想在单击X时对我的复选框进行排序:

推荐答案

Javascript相关问答推荐

使用axios.获取实时服务器时的404响应

如何用显示网格平滑地将元素从一个地方移动到另一个地方？

useNavigation更改URL，但不呈现或显示组件

如何在Angular中插入动态组件

colored颜色检测JS，平均图像 colored颜色检测JS

显示图—如何在图例项上添加删除线效果？

Angular 订阅部分相互依赖并返回数组多个异步Http调用

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

如何使用JS创建一个明暗功能按钮？

Nextjs 13.4 Next-Auth 4.2登录(&Quot；凭据&，{})；不工作

React：防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

如何在AG-Grid文本字段中创建占位符

我怎样才能得到一个数组的名字在另一个数组？

无法使用npm install安装react-dom、react和next

在将元素追加到DOM之前，createElement()是否会触发回流？混淆abt DocumentFragment行为

MAT-TREE更多文本边框对齐问题

我想为我的Reaction项目在画布上加载图像/视频，图像正在工作，但视频没有

如何缩小函数中联合返回类型的范围

调试jQuery代码以获取所有行的总和(票证类型)

如何在不获取其子元素的文本内容的情况下获取元素的文本内容？