需要显示大 table 定位到具有特定文本的 td 行

Question

我有一个大htmltable。我需要允许用户输入一两个字母，然后定位以该文本为前缀的第一行并滚动到该元素。

我已经搜索并演示了所有相关帖子（我认为）但找不到任何接近的内容。

<script>
var container = $('div'),
    scrollTo = $('#row_8');

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
</script>

<style>
div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}
</style

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
        <tr id='row_10'><td>10</td></tr>
        <tr id='row_11'><td>11</td></tr>
        <tr id='row_12'><td>12</td></tr>
        <tr id='row_13'><td>13</td></tr>
        <tr id='row_14'><td>14</td></tr>
        <tr id='row_15'><td>15</td></tr>
        <tr id='row_16'><td>16</td></tr>
        <tr id='row_17'><td>17</td></tr>
        <tr id='row_18'><td>18</td></tr>
        <tr id='row_19'><td>19</td></tr>
        <tr id='row_20'><td>20</td></tr>
        <tr id='row_21'><td>21</td></tr>
        <tr id='row_22'><td>22</td></tr>
        <tr id='row_23'><td>23</td></tr>
        <tr id='row_24'><td>24</td></tr>
        <tr id='row_25'><td>25</td></tr>
        <tr id='row_26'><td>26</td></tr>
        <tr id='row_27'><td>27</td></tr>
        <tr id='row_28'><td>28</td></tr>
        <tr id='row_29'><td>29</td></tr>
        <tr id='row_30'><td>30</td></tr>
        <tr id='row_31'><td>31</td></tr>
        <tr id='row_32'><td>32</td></tr>
        <tr id='row_33'><td>33</td></tr>
        <tr id='row_34'><td>34</td></tr>
        <tr id='row_35'><td>35</td></tr>
        <tr id='row_36'><td>36</td></tr>
        <tr id='row_37'><td>37</td></tr>
        <tr id='row_38'><td>38</td></tr>
        <tr id='row_39'><td>39</td></tr>
        <tr id='row_40'><td>40</td></tr>
        <tr id='row_41'><td>41</td></tr>
        <tr id='row_42'><td>42</td></tr>
        <tr id='row_43'><td>43</td></tr>
        <tr id='row_44'><td>44</td></tr>
        <tr id='row_45'><td>45</td></tr>
        <tr id='row_46'><td>46</td></tr>
        <tr id='row_47'><td>47</td></tr>
        <tr id='row_48'><td>48</td></tr>
        <tr id='row_49'><td>49</td></tr>
    </table>
</div>

Answer 1

我可能会建议您使用输入文本框插入前一个或两个字符，然后向下滚动到该行（如果存在）（如何组织这取决于您，这只是一个想法） :

下面一行：

 var row = $('table').find('tr').filter(function(index, element) {
  return $(element).text().trim().startsWith(c);
}).first();

选择文本以您键入的字符串开头的第一行（如果仅包含一个字符，则为一个字符）。对于文本，我打算使用整行文本：cell1 text + cell1 text + ... 因此，通过这种方式，您可以仅与键入的第一个字符（一个或两个或多个）进行比较。如果此行不存在，则不执行任何操作。

$(function () {
  $('#iGoTo').on('input', function(e) {
    var c = this.value
    var row = $('table').find('tr').filter(function(index, element) {
      return $(element).text().trim().startsWith(c);
    }).first();
    if (row.length == 1) {
      $('html, body').animate({
        scrollTop: row.offset().top
      }, 'slow');
    }
  })
});

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

Goto row: <input id="iGoTo" type="text" maxlength="2"/>
<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>1Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>2Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>3Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>4Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>5Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>6Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>7Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>8Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>9Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>10Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>11Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>12Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>13Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>14Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>15Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>16Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>17Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>18Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>19Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>20Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>21Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>22Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>23Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>24Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>25Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>26Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>27Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>28Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>29Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>30Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

需要显示大 table 定位到具有特定文本的 td 行

Need to display large table positioned to row that has td with cerain text

html

jquery

contains