Question

我有一张类似日历的桌子。

请看一下代码片段，很难解释我想从jQuery获得什么。

当您查看表格时，您会在第一个td中找到时间。

当我从08:00到09:00开始调整div的大小时，我希望得到tr的索引，其中第一个td的值为09:00。

$('#resize').resizable({
    grid: 45,
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    },
    stop: function( event, ui ) {
        //*********** 
        // THIS WILL ONLY GIVE ME THE INDEX WHERE THE DIV BEGINS
        // BUT I WANT TO HAVE THE INDEX WHERE THE DIV ENDS AFTER RESIZING
        var index = $(this).parent().parent().index();
    }
});

我只能获取div开始的索引，即08:00。但是我希望div结束的索引。所以09:00。

非常感谢你们！

修改

我还尝试获取鼠标位置并获得最接近的td和tr

用

event.pageY

我只获得鼠标位置，但我无法进入tr索引......

＆＃13;

$('#test').resizable();

＆＃13;

.dragDiv {
  background-color: #14A07D;
  background: linear-gradient(#1BD6A7, #14A07D);
  background-clip: padding-box;
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  top: 0px;
  left: 0px;
  color: #FFFFFF;
  font-weight: bold;
  white-space: pre;
  border-radius: 2px;
}

.dragDiv:hover {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  background: #ff0080;
  background: linear-gradient(#fe78ad, #ff0080);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #FFFFFF;
}

table,
th,
td {
  border-bottom: 1px dashed #f0f0ec;
  border-top: 1px dashed #f0f0ec;
  border-right: 1px solid #e9e9e4;
  border-right: 1px solid #e9e9e4;
  *height: 16px;
  font-size: 12px;
  text-align: center;
}

td {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<table name="kalender" class="kalender" id="mytable" width="100%" border="0">

  <tr height="45px">
    <td id="28800" class="uhrzeit nodroppable"><b>08:00</b></td>
    <td class="normalerTermin  solidLine">1
      <div class="dragDiv" style="height:44px; line-height:44px; font-size:12px;" id="test">TEST</div>
    </td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">2</td>
    <td class="keineArbeitszeit  solidLine droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">4</td>
    <td class="keineArbeitszeit  solidLine droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">6</td>
  </tr>
  <tr height="45px">
    <td id="30600" class="uhrzeit nodroppable">08:30</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">2</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">4</td>
    <td class="keineArbeitszeit   droppable" title="Der Mitarbeiter arbeitet zu dieser Zeit nicht">5</td>
    <td class="terminRightBorder  ">6
    </td>
  </tr>
  <tr height="45px">
    <td id="32400" class="uhrzeit nodroppable"><b>09:00</b></td>
    <td class="termin droppable nochKeinTermin  solidLine">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">2</td>
    <td class="termin droppable nochKeinTermin  solidLine">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">4</td>
    <td class="termin droppable nochKeinTermin  solidLine">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  solidLine">6</td>
  </tr>
  <tr height="45px">
    <td id="34200" class="uhrzeit nodroppable">09:30</td>
    <td class="termin droppable nochKeinTermin  ">1</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">2</td>
    <td class="termin droppable nochKeinTermin  ">3</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">4</td>
    <td class="termin droppable nochKeinTermin  ">5</td>
    <td class="terminRightBorder droppable nochKeinTermin  ">6</td>
  </tr>
</table>

＆＃13;

Answer 1

这就是诀窍

// get the bottom coordinate of the resized DIV 
var y = ($(this).offset().top + ui.size.height);

// get the x coordinate
var x = $(this).offset().left;

// get all elements below the calculated point
var elem = document.elementFromPoint(x, y);

// get the element "tr" of all elements and fetch the ID
var time = $('td:first', $(elem).parents('tr')).attr('id');

jQuery resizable：在stop事件中获得第一个td值

1 个答案: