Wie programmiere ich ein HTML-Element?

Question

Ich versuche, eine Webseite mit einer Tabelle von Elementen zu erstellen, aus denen der Benutzer auswählen kann. Die Anzahl der Elemente kann so klein wie ein einzelnes Element sein, wird aber auch so groß wie etwa 120. Ich möchte nicht, dass der Tisch die Seite ausdehnt, also stopfe ich ihn in sein eigenes <div> Tag mit einer definierten Höhe und eine vertikale Bildlaufleiste. Ein nackten Knochen Beispiel:

<div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;"> 
    <table> 
    <tr><td>item 1</td></tr> 
    <tr><td>item 2</td></tr> 
    <tr><td>item 3</td></tr> 
    <tr><td>item 4</td></tr> 
    <tr><td>item 5</td></tr> 
    <tr><td>item 6</td></tr> 
    <tr><td>item 7</td></tr> 
    <tr><td>item 8</td></tr> 
    <tr style="color:#00aa00"><td>item 9</td></tr> 
    </table> 
</div> 

In diesem Beispiel ist die Tabelle, die in einem vertikal-Scrolling-Bereich und das aktive Element ist die letzte in der Tabelle. So weit, ist es gut.

Meine Frage ist: Beim Aktualisieren dieser Tabelle, wie kann ich es so einstellen, dass es automatisch bis zum Ende scrollt? Wenn zum Beispiel die Seite erzeugt wird, sollte Element 9 automatisch ausgewählt werden; Die Benutzeroberfläche sollte dieses Element bereits in der Liste markieren und das bedeutet, dass die Bildlaufleiste automatisch auf das Ende gesetzt wird.

Ich sehe keinen Weg, es mit dem <div> Tag zu tun (obwohl ich etwas vermisse). Muss ich ein Tag verwenden, wie? Ich denke, wenn jede Zeile der Tabelle ein Anker-Tag hat, dann könnte die Scroll-Position auf diese Weise gesetzt werden. Ich bin mir nicht ganz sicher, wie ich das machen soll, also dachte ich, ich würde fragen.

Ich weiß, es gibt wahrscheinlich Datentabelle plugins, die ich verwenden kann, um dies zu tun (Ich habe YUI zuvor verwendet, und ich habe nie herausgefunden, ob es dieses spezielle Problem lösen könnte). Aber das scheint einfach genug zu sein, dass ich nicht das Gefühl habe, dass ich irgendein Plugin importieren müsste, das leicht als eine ganze In-Browser-Tabelle verwendet werden könnte.

Answer 1

Try so etwas wie diese: http://jsfiddle.net/2yMWC/1/ (kein jQuery)

die Idee ist, dass, wenn ein Element ausgewählt wird, nehmen Sie zur Kenntnis jenes offsetTop Eigenschaft des Elements in JavaScript und aktualisieren Sie die <div> Element scrollTop zu entsprechen. Ich habe etwas CSS hinzugefügt, das die Höhen der Zeilen inkonsistent macht, nur um zu überprüfen, wie robust die Technik ist.

Hier ist ein allgemeineres Beispiel, bei dem der Benutzer dort jede Zeile und jump/Scroll wählen: http://jsfiddle.net/2yMWC/

Die JavaScript

var divEl = document.getElementById("scroll-pane"); 
var selectedTrEl = undefined; 

function select(index) { 
    var trEl = divEl.getElementsByTagName("tr")[index]; 
    if(selectedTrEl) { 
     selectedTrEl.className = ""; 
    } 
    selectedTrEl = trEl; 
    selectedTrEl.className = "selected"; 
    var scrollTo = selectedTrEl.offsetTop; 
    divEl.scrollTop = scrollTo; 
} 

select(76); 

(function forever() { 
    var trEls = divEl.getElementsByTagName("tr"); 
    var itemNumber = trEls.length; 
    var tdEl = document.createElement("td"); 
    tdEl.appendChild(document.createTextNode("item "+itemNumber)); 
    var trEl = document.createElement("tr"); 
    trEl.appendChild(tdEl); 
    trEls[0].parentNode.appendChild(trEl); 
    select(itemNumber); 
    setTimeout(forever, 1000); 
}()); 

Die HTML

<div id="scroll-pane" style="width:250px; height:100px; overflow-y:scroll; overflow-x:hidden;"> 
    <table> 
    <tr><td>item 0</td></tr> 
    <tr><td>item 1</td></tr> 
    <tr><td>item 2</td></tr> 
    <tr><td>item 3</td></tr> 
    <tr><td>item 4</td></tr> 
    <tr><td>item 5</td></tr> 
    <tr><td>item 6</td></tr> 
    <tr><td>item 7</td></tr> 
    <tr><td>item 8</td></tr> 
    <tr><td>item 9</td></tr> 
    <tr><td>item 10</td></tr> 
    <tr><td>item 11</td></tr> 
    <tr><td>item 12</td></tr> 
    <tr><td>item 13</td></tr> 
    <tr><td>item 14</td></tr> 
    <tr><td>item 15</td></tr> 
    <tr><td>item 16</td></tr> 
    <tr><td>item 17</td></tr> 
    <tr><td>item 18</td></tr> 
    <tr><td>item 19</td></tr> 
    <tr><td>item 20</td></tr> 
    <tr><td>item 21</td></tr> 
    <tr><td>item 22</td></tr> 
    <tr><td>item 23</td></tr> 
    <tr><td>item 24</td></tr> 
    <tr><td>item 25</td></tr> 
    <tr><td>item 26</td></tr> 
    <tr><td>item 27</td></tr> 
    <tr><td>item 28</td></tr> 
    <tr><td>item 29</td></tr> 
    <tr><td>item 30</td></tr> 
    <tr><td>item 31</td></tr> 
    <tr><td>item 32</td></tr> 
    <tr><td>item 33</td></tr> 
    <tr><td>item 34</td></tr> 
    <tr><td>item 35</td></tr> 
    <tr><td>item 36</td></tr> 
    <tr><td>item 37</td></tr> 
    <tr><td>item 38</td></tr> 
    <tr><td>item 39</td></tr> 
    <tr><td>item 40</td></tr> 
    <tr><td>item 41</td></tr> 
    <tr><td>item 42</td></tr> 
    <tr><td>item 43</td></tr> 
    <tr><td>item 44</td></tr> 
    <tr><td>item 45</td></tr> 
    <tr><td>item 46</td></tr> 
    <tr><td>item 47</td></tr> 
    <tr><td>item 48</td></tr> 
    <tr><td>item 49</td></tr> 
    <tr><td>item 50</td></tr> 
    <tr><td>item 51</td></tr> 
    <tr><td>item 52</td></tr> 
    <tr><td>item 53</td></tr> 
    <tr><td>item 54</td></tr> 
    <tr><td>item 55</td></tr> 
    <tr><td>item 56</td></tr> 
    <tr><td>item 57</td></tr> 
    <tr><td>item 58</td></tr> 
    <tr><td>item 59</td></tr> 
    <tr><td>item 60</td></tr> 
    <tr><td>item 61</td></tr> 
    <tr><td>item 62</td></tr> 
    <tr><td>item 63</td></tr> 
    <tr><td>item 64</td></tr> 
    <tr><td>item 65</td></tr> 
    <tr><td>item 66</td></tr> 
    <tr><td>item 67</td></tr> 
    <tr><td>item 68</td></tr> 
    <tr><td>item 69</td></tr> 
    <tr><td>item 70</td></tr> 
    <tr><td>item 71</td></tr> 
    <tr><td>item 72</td></tr> 
    <tr><td>item 73</td></tr> 
    <tr><td>item 74</td></tr> 
    <tr><td>item 75</td></tr> 
    <tr><td>item 76</td></tr> 
    <tr><td>item 77</td></tr> 
    <tr><td>item 78</td></tr> 
    <tr><td>item 79</td></tr> 
    <tr><td>item 80</td></tr> 
    <tr><td>item 81</td></tr> 
    <tr><td>item 82</td></tr> 
    <tr><td>item 83</td></tr> 
    <tr><td>item 84</td></tr> 
    <tr><td>item 85</td></tr> 
    <tr><td>item 86</td></tr> 
    <tr><td>item 87</td></tr> 
    <tr><td>item 88</td></tr> 
    <tr><td>item 89</td></tr> 
    <tr><td>item 90</td></tr> 
    <tr><td>item 91</td></tr> 
    <tr><td>item 92</td></tr> 
    <tr><td>item 93</td></tr> 
    <tr><td>item 94</td></tr> 
    <tr><td>item 95</td></tr> 
    <tr><td>item 96</td></tr> 
    <tr><td>item 97</td></tr> 
    <tr><td>item 98</td></tr> 
    <tr><td>item 99</td></tr> 
    </table> 
</div> 

Einige CSS

.selected { 
    color:#00aa00 
} 
table tr:nth-child(2n) { 
    font-size:200%; 
} 

Answer 2

Sie können einfach die scrollTop -Eigenschaft des Containerelements auf die scrollHeight -Eigenschaft setzen, um es nach unten zu scrollen.

Alternativ können Sie es auf die offsetTop des Zielelements setzen (und sogar einige davon subtrahieren, um es näher an die Mitte der Ansicht zu bekommen).

Answer 3

Sie können dies mit Vanilla HTML tun. Geben Sie dem Element ein ID-Attribut und hängen Sie die ID an die URL an. Es wird als Ziel Ankerfunktion:

<div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;"> 
    <table> 
    <tr><td>item 1</td></tr> 
    <tr><td>item 2</td></tr> 
    <tr><td>item 3</td></tr> 
    <tr><td>item 4</td></tr> 
    <tr><td>item 5</td></tr> 
    <tr><td>item 6</td></tr> 
    <tr><td>item 7</td></tr> 
    <tr><td>item 8</td></tr> 
    <tr style="color:#00aa00" id="new"><td>item 9</td></tr> 
    </table> 
</div> 

Going to http://yourwebsite.com/some-page#new werden Sie zum Artikel springen 9.

Mehr Infos unter w3.org (den Anker in der URL bemerken): http://www.w3.org/TR/html4/struct/links.html#h-12.1.3