Question

我有一个固定大小的可滚动div，其中有500行。每行有6列输入，textarea，select元素。

我想找到屏幕上当前可见的所有输入元素（即div的视口中的输入元素），而不是选择所有输入元素。

例如。如果我在第320项并且我可以看到高达350的元素，我只需要选择该范围内的输入元素

以下是可滚动框中1行的修剪版本：

<tbody>
    <tr>
        <td>
            <input id="prm_1_1_1_100" type="checkbox" value="" name="checkbox" style="display: none;">
        </td>
        <td>
            <span id="dsp_1_1_2_2"></span>
        </td>
        <td>
            <input id="dsp_1_1_1_5" type="text" value="" maxlength="16" minlength="16" required="true" data-allow="alphanumeric">
        </td>
        <td>
            <input id="dsp_1_1_1_6" type="text" value="" maxlength="500" required="true">
        </td>
        <td>
            <input id="dsp_1_1_1_7" type="text" value="" required="true" data-max-date="today" data-toggle="datepicker" class="hasDatepicker">
        </td>
        <td>
            <input id="dsp_1_1_1_8" type="text" value="" maxlength="20" data-allow="toFixedDecimal">
        </td>
        <td>
            <input id="dsp_1_1_1_9" type="text" value="" data-allow="toFixedDecimal">
        </td>
        <td>
            <textarea id="dsp_1_1_1_22" rows="1" cols="20" required="true" onkeyup="javascript: getVals(this, 'textarea');"></textarea>
        </td>
        <td>
            <select id="dsp_1_1_1_23">
                <option value="RLB" selected="selected">RLB</option>
                <option value="CLB">CLB</option>
            </select>
        </td>
        <td>
            <select id="dsp_1_1_1_14" disabled="disabled">
                <option value="Open" selected="selected">Open</option>
                <option value="Drop">Drop</option>
                <option value="MAP">MAP</option>
                <option value="Carry Over"> Carry Over</option>
            </select>
        </td>
        <td>
            <input id="dsp_1_1_1_15" type="text" value="" disabled="disabled" class="width-80">
        </td>
        <td>
            <input id="dsp_1_1_1_16" type="text" value="" disabled="disabled" class="width-80">
        </td>
    </tr>
</tbody>

Answer 1

您可以按scrollTop相对于每个行顶部位置的位置进行过滤：

function getElements ($scroll) {
    var viewportStart = $scroll.scrollTop();
    var viewportEnd = viewportStart + $scroll.height();

    return $scroll.find('tr, .row').filter(function() {
        var $row = $(this);
        var rowTop = $row.position().top;
        return rowTop >= viewportStart && rowTop <= viewportEnd;
    });
};

var $container = $('div.scroll');    // $('table')

getElements($container).css('backgroundColor', '#00f');

Answer 2

你可以创建一个jQuery插件来做到这一点！

范围开始需要是偏移，而不是顶部位置。

注意： 请务必点击 {kbd> 整页 按钮下面的代码片段可以查看更多行。

＆＃13;

body {
  padding: 0.5em;
}
h1 {
  font-size: 2em;
  margin: 0.5em 0;
  font-weight: bolder;
}
.scrollable {
  overflow: scroll;
}
.viewport-half-vertical {
  max-height: 50vh;
  width: 100%'
}
.viewport-half-vertical table {
    border-spacing: 0.125em;
    border-collapse: separate;
}
.viewport-half-vertical table td {
  padding: 0.0625em;
  text-align: center;
}
.viewport-half-vertical table input {
  width: 99%;
  text-align: center;
}
.selected {
  background: #AAF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Select Elements in Viewport</h1>
<div class="viewport-half-vertical scrollable">
  <table></table>
</div>
<button class="select-btn">Select Visible</button>

＆＃13;

<div>
    @Html.Partial("_MyPartialView",< model for partial view>,
            new ViewDataDictionary { { "Region", "HTMLSection" } } })
</div>

@section scripts{

    @Html.Partial("_MyPartialView",<model for partial view>, 
                  new ViewDataDictionary { { "Region", "ScriptSection" } })

 }

＆＃13;

查找可滚动div的可见区域中的所有输入元素

2 个答案: