jQuery可调整大小:在停止事件中获取第一个td值

问题描述

我有一个像日历的桌子.

I have a table that is like a calendar.

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

Please have a look at the code snippet, it is hard to explain what I want to get from jQuery.

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

When you have a look at the table you will find times in the first td's.

当我从08:00到09:00开始调整div的大小时，我想获取tr的索引，其中第一个td的值为09:00.

When I start resizing the div from 08:00 to 09:00, I want to get the index of the tr where the first td has the value 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

I only can fetch the index where the div begins, that would be 08:00. But I want to have the index where the div ends. So 09:00.

非常感谢你们！！

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

I also tried to get the mouse position and get the closest td and tr

使用

event.pageY 

我仅获得鼠标位置，但无法获得tr索引...

I only get the mouse position but I am unable to get to the tr index...

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

.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;
}

<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>

推荐答案

这可以解决问题

// 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可调整大小:在停止事件中获取第一个td值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！