How to make a single <td> element in a <tr> not sortable (jquery ui)

萝らか妹 提交于 2020-01-03 17:23:27

问题


I have a table like this

<table>
  <tr class="sortable">
    <td>Days</td>
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
    <td>Thursday</td>
    <td>Friday</td>
    <td>Saturday</td>
  </tr>
  <tr class="sortable">
    <td>Works</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

In this, I don't want the <td>'s "Days" and "Works" not sort-able but remaining in the row.


回答1:


Make the row headers <th> as they should be and include only <td> elements.

<table>
  <tr class="sortable">
    <th>Days</th>
    <td>Monday</td>
     ...

​$( '​​​​.sortable' ).sortable({
    items: 'td'
});​​​​​

Demo: http://jsfiddle.net/Xugru/




回答2:


You can use the cancel option for this:

$('.sortable').sortable({
    cancel: 'td:first'
});

Here's docs.




回答3:


<table>
  <tr class="sortable">
    <td>Days</td>
    <td>Monday</td>
    <td>Tuesday</td>
    <td>Wednesday</td>
    <td>Thursday</td>
    <td>Friday</td>
    <td>Saturday</td>
  </tr>
  <tr class="sortable">
    <td>Works</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Let's make the column id not to be sortable.

$(".sortable").sortable({
 items: "td:not(:first)"
});

That's all. All you need is to excludethe first td in items.

Have a great day



来源:https://stackoverflow.com/questions/14069435/how-to-make-a-single-td-element-in-a-tr-not-sortable-jquery-ui

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!