blocks|key|706153|text|在输入之前添加一个隐藏的跨度，并在其中包含一些文本(将用于对列进行排序)。类似于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|706154|<td>
++++<span+class="hidden">1</span>
++++<input+type="checkbox"+name="x"+value="y">
</td>|code-block|syntax|javascript|706155|如果需要，您可以将事件附加到复选框，以便在选中/取消选中时修改上一个同级(范围)的内容：|706156|$(document).ready(function()+{

++++$('#tableid+input').click(function()+{
+++++++++var+order+=+this.checked+?+'1'+:+'0';
+++++++++$(this).prev().html(order);
++++})

})|706157|注意:我没有检查代码，所以它可能有错误。|706158|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Add a hidden span just before the input, and include in it some text (that will be used to sort the column). Something like:</p>

<pre><code>&lt;td&gt;
    &lt;span class="hidden"&gt;1&lt;/span&gt;
    &lt;input type="checkbox" name="x" value="y"&gt;
&lt;/td&gt;
</code></pre>

<p>If needed, you can attach an event to the checkbox so that it modifies the content of the previous sibling (the span) when checked/unchecked:</p>

<pre><code>$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})
</code></pre>

<p>Note: I haven't checked the code, so it might have errors.</p>


blocks|key|706184|text|您可以向TableSorter添加一个自定义解析器，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|706185|+$.tablesorter.addParser({+
++++//+set+a+unique+id+
++++id:+'input',+
++++is:+function(s)+{+
++++++++//+return+false+so+this+parser+is+not+auto+detected+
++++++++return+false;+
++++},+
++++format:+function(s)+{+
++++++++//+Here+we+write+custom+function+for+processing+our+custum+column+type+
++++++++return+$("input",$(s)).val()+?+1+:+0;+
++++},+
++++//+set+type,+either+numeric+or+text+
++++type:+'numeric'+
});+|code-block|syntax|javascript|706186|然后在您的表中使用它|706187|$("table").tablesorter(headers:{0:{sorter:input}});|706188|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can add a custom parser to TableSorter, something like this:</p>

<pre><code> $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 
</code></pre>

<p>And then use it in your table </p>

<pre><code>$("table").tablesorter(headers:{0:{sorter:input}});
</code></pre>


blocks|key|706227|text|这是Haart答案的更完整/更正确的版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|706228|$(document).ready(function()+{
++++$.tablesorter.addParser({+
++++++++id:+"input",+
++++++++is:+function(s)+{+
++++++++++++return+false;+
++++++++},+
++++++++format:+function(s,+t,+node)+{
++++++++++++return+$(node).children("input[type=checkbox]").is(':checked')+?+1+:+0;
++++++++},+
++++++++type:+"numeric"+
++++});

++++sorter+=+$("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
//+The+next+makes+it+respond+to+changes+in+checkbox+values+
++++sorter.bind("sortStart",+function(sorter){$("#table").trigger("update");});

});+|code-block|syntax|javascript|706229|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the more complete/correct version of Haart's answer. </p>

<pre><code>$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 
</code></pre>


blocks|key|706328|text|我之所以添加此响应，是因为我正在使用一个支持/派生的具有新功能的jQuery+TableSorter库。还包括一个可选的用于输入/选择字段的解析器库。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|706329|http://mottie.github.io/tablesorter/docs/|offset|length|706330|下面是一个示例：http://mottie.github.io/tablesorter/docs/example-widget-grouping.html，它通过包含输入/选择解析器库"+parser+-input-select.js“、添加一个headers对象、声明列和解析类型来完成。|706331|headers:+{
++0:+{+sorter:+'checkbox'+},
++3:+{+sorter:+'select'+},
++6:+{+sorter:+'inputs'+}
}|code-block|syntax|javascript|706332|其他解析器包括:日期解析(w/Sugar+&+DateJS)、日期、月份、2位年份、工作日、距离(英尺/英寸&公制)和标题格式(去掉"A“和”ISO8601“)。|706333|entityMap|0|LINK|mutability|MUTABLE|url|1|http://mottie.github.io/tablesorter/docs/example-widget-grouping.html^0|0|0|15|0|0|8|1X|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]|V|$5|R|S|T|A|$U|W]]]]

<p>I'm adding this response because I'm using a supported/forked jQuery TableSorter library with new features.  An optional parser library for input/select fields is included.</p>

<p><a href="http://mottie.github.io/tablesorter/docs/" rel="noreferrer">http://mottie.github.io/tablesorter/docs/</a></p>

<p>Here's an example:
<a href="http://mottie.github.io/tablesorter/docs/example-widget-grouping.html" rel="noreferrer">http://mottie.github.io/tablesorter/docs/example-widget-grouping.html</a>
and it's done by including the input/select parser library "parser-input-select.js", adding a headers object and declaring the columns and parsing type.</p>

<pre><code>headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}
</code></pre>

<p>Additional parsers included are: date parsing (w/Sugar &amp; DateJS), ISO8601 dates, months, 2 digit years, weekdays, distance (feet/inches &amp; metric) and title format (removes "A" &amp; "The"). </p>


blocks|key|1920019|text|您可以使用tablesorter+jQuery插件并添加能够对所有复选框列进行排序的自定义解析器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1920020|$.tablesorter.addParser({
++++++++id:+'checkbox',
++++++++is:+function+(s,+table,+cell)+{
++++++++++++return+$(cell).find('input[type=checkbox]').length+>+0;
++++++++},
++++++++format:+function+(s,+table,+cell)+{
++++++++++++return+$(cell).find('input:checked').length+>+0+?+0+:+1;
++++++++},
++++++++type:+"numeric"
++++});|code-block|syntax|javascript|1920021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use the tablesorter jQuery plugin and add a custom parser that is able to sort all checkbox columns:</p>

<pre><code>$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length &gt; 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length &gt; 0 ? 0 : 1;
        },
        type: "numeric"
    });
</code></pre>


blocks|key|706410|text|只需最后一次接触，使Aaron的答案完整，并避免堆栈溢出错误。因此，除了如上所述使用$.tablesorter.parser()功能之外，我还必须在页面中添加以下内容，以便在运行时使用更新后的复选框值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|706411|++++var+checkboxChanged+=+false;

++++$('input[type="checkbox"]').change(function(){
++++++++checkboxChanged+=+true;
++++});

++++//+sorterOptions+is+a+variables+that+uses+the+parser+and+disables
++++//+sorting+when+needed
++++$('#myTable').tablesorter(sorterOptions);
++++//+assign+the+sortStart+event
++++$('#myTable')..bind("sortStart",function()+{
++++++++if+(checkboxChanged)+{
++++++++++++checkboxChanged+=+false;
++++++++++++//+force+an+update+event+for+the+table
++++++++++++//+so+the+sorter+works+with+the+updated+check+box+values
++++++++++++$('#myTable')..trigger('update');
++++++++}
++++});|code-block|syntax|javascript|706412|entityMap^0|16|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Just one final touch to make Aaron's answer complete and avoid the stack overflow errors. So, in addition to using the <code>$.tablesorter.parser()</code> functionality as described above, I had to add the following in my page to make it work with updated checkbox values at runtime.</p>

<pre><code>    var checkboxChanged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });
</code></pre>


blocks|key|619332|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|619333|++++<td+align="center">
++++<p+class="checkBoxSorting">YOUR+DATA+BASE+VALUE</p>
++++<input+type="checkbox"+value="YOUR+DATA+BASE+VALUE"/>
++++</td>|code-block|syntax|javascript|619334|619335|619336|//javascript
$(document).ready(function()+{
$(".checkBoxSorting").hide();
});|619337|619338|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|H|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;td align="center"&gt;
    &lt;p class="checkBoxSorting"&gt;YOUR DATA BASE VALUE&lt;/p&gt;
    &lt;input type="checkbox" value="YOUR DATA BASE VALUE"/&gt;
    &lt;/td&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});</code></pre>
</div>
</div>
</p>


blocks|key|619363|text|我尝试了其他答案中的多种方法，但最终使用了来自salgiza的被接受的答案，以及martin关于更新表模型的评论。但是，当我第一次实现它时，我在checkbox+onchange触发器中设置了update行，就像上面提到的那样。这在选中/取消选中复选框时重新排列了我的行，这让我感到非常困惑。点击一下，线条就跳开了。因此，我将更新功能绑定到实际的checkbox列标题，以便只有在单击以更新排序时才会重新排列行。它就像我想要的那样工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|619364|//+checkbox-sorter+is+the+assigned+id+of+the+th+element+of+the+checbox+column
$("#checkbox-sorter").click(function(){+
++++$(this).parents("table").trigger("update");
});|code-block|syntax|javascript|619365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I tried multiple of the approaches in the other answers, but ended up using the accepted answer from salgiza, with the comment from martin about updating the table model. However, when I first implemented it, I set the update line inside the checkbox onchange trigger, like the wording suggested. This rearranged my rows on checking/unchecking checkbox, which I found very confusing. The lines just hopped away on click. So instead I bound the update functionality to the actual checkbox column header, so that the lines would only be rearranged when clicking to update the sorting. It works just as I want it to:</p>

<pre><code>// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});
</code></pre>


<p>I have a table like this:</p>

<pre><code>|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 
</code></pre>

<p>Where the Update column contains checkboxes <code>&lt;input type='checkbox' /&gt;</code>. </p>

<p>The checkbox initial state is determined before rendering the table, but after the rows are fetched from database (it's based on set of conditions, on the server-side). </p>

<p>The checkbox can be checked by default, unchecked by default or disabled (<code>disabled='disabled'</code> as <code>input</code> attribute).</p>

<p>I'm using <a href="http://tablesorter.com/" rel="nofollow noreferrer">jQuery's Tablesorter</a> to sort my tables. And I'd like to be able to sort by the column containing the checkboxes. How is it possible (I could pass some additional attributes to my <code>input</code> element maybe, if it would help...)?</p>

<p>Should I write my own parser to handle that? </p>


How can I sort columns having input elements?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一张这样的桌子：|   Update   |   Name  |  Code      | modification date ||            |   name1 | code1      | 2009-12-09        ||            |   name2 | otehercode ...

问如何对具有输入元素的列进行排序？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对具有输入元素的列进行排序？EN