首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在使用jqueryui sortable进行拖动时设置表行中td元素的样式

如何在使用jqueryui sortable进行拖动时设置表行中td元素的样式
EN

Stack Overflow用户
提问于 2017-11-17 05:32:37
回答 1查看 284关注 0票数 0

使用jQueryUI sortable,我可以拖放表中的行。我想在拖动时更改行的样式。

在互联网上找到的选项如下:

代码语言:javascript
复制
start: function(event, ui) {
    $(ui.item).css({
      'border': '1px solid #F95658',
      'background-color': '#bbb'
    });
  },

但是,这不能让我设置单元格的边框或背景颜色的样式。

占位符也是如此。

有没有一种方法来设计这些?

代码语言:javascript
复制
$("table tbody").sortable({
  axis: 'y',
  placeholder: "ui-sortable-placeholder",
  revert: true,
  helper: fixHelper,
  start: function(event, ui) {
    $(ui.item).css({
      'border': '1px solid #F95658',
      'background-color': '#bbb'
    });
  },
  stop: function(event, ui) {
    $(ui.item).css({
      //'background-color': '#fff'
    });
  }
}).disableSelection();


var fixHelper = function(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
};
代码语言:javascript
复制
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  background-color: #dce0e3;
}

.ui-sortable-placeholder {
  background-color: #fff;
  outline: 0px dashed black;
  padding: 0px 0px;
}
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />



<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-17 05:47:49

把这个放在TD上

代码语言:javascript
复制
$(ui.item).find('td').css({
  'border': '1px solid #F95658',
  'background-color': '#bbb'
});

在这之后

代码语言:javascript
复制
$(ui.item).css({
  'border': '1px solid #F95658',
  'background-color': '#bbb'
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47339434

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档