user990016 user990016 - 4 months ago 10
HTML Question

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

I have a large html table. I need to allow the user to type a letter or two then position the first row that is prefixed by that text and scroll to that element.

I have searched and demo'd all the relative posts ( I think ) but cannot find anything close.

Fiddle here

<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

I may suggest you to use an input text box to insert the first one or two chars and then scroll down to that row, if it exists (how to organize this is up to you, this is only an idea):

The following line:

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

selects the first row having a text starting with the string you typed (one char if it contains only one char). For text I intend the whole row text: cell1 text + cell1 text + ... So in this way you compare just against the first chars (one or two or more) you typed. If this row does not exist do nothing.

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