Zum nächsten Eintrag in einer Tabelle springen
Guten Tag liebe Foren-Community!
Ich zerbreche mir seit Tagen den Kopf über ein Problem und ausgiebiges Googlen liefert mir auch nicht die Antwort...
Das Problem ist folgendes, ich habe eine Tabelle mit verschiedenen Einträgen, zwischendurch erscheint dort ein Indikator vom System, welches eine bestimmte Stelle kennzeichnet.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
.tab{
min-width: 600px;
width:auto;
table-layout: fixed;
border-collapse: collapse;
border:2px solid black;
margin-left:calc(50% - 300px);
}
.tab th {
text-decoration: underline;
}
.tab th,
.tab td {
height:25px;
text-align: left;
}
.tab td:nth-child(1),.tab th:nth-child(1){
padding-left:10px;
}
.tab td:nth-child(1),
.tab th:nth-child(1) {
min-width:200px;
}
.tab td:nth-child(2),
.tab th:nth-child(2) {
min-width: 200px;
}
.tab td:nth-child(3),
.tab th:nth-child(3) {
width: 200px;
}
.tab thead {
background-color:black;
color: #FDFDFD;
}
.tab thead tr {
display: block;
position: relative;
}
.tab tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.tab tbody tr:nth-child(even) {
background-color: grey;
}
.tab tbody tr:nth-child(odd) {
background-color: lightgrey;
}
.rot{
background:red;
border:3px solid red;
}
</style>
<table class="tab"><thead><tr><th>Reihe</th><th>Bla</th><th>Px von oben</th></tr></thead>
<tbody><tr><td>Reihe 0</td><td>bla</td><td>bla blub</td></tr>
<tr class="rot"><td id="a0">Reihe 1</td><td>System</td><td>Error Message</td></tr>
<tr><td>Reihe 2</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 3</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 4</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 5</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 6</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 7</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 8</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 9</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 10</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 11</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 12</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 13</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 14</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 15</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 16</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 17</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 18</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 19</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 20</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 21</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 22</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 23</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 24</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 25</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 26</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 27</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 28</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 29</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 30</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 31</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 32</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 33</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 34</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 35</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 36</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 37</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 38</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 39</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 40</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 41</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 42</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 43</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 44</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 45</td><td>bla</td><td>bla blub</td></tr>
<tr class="rot"><td id="a1">Reihe 46</td><td>System</td><td>Error Message</td></tr><tr><td>Reihe 47</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 48</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 49</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 50</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 51</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 52</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 53</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 54</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 55</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 56</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 57</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 58</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 59</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 60</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 61</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 62</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 63</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 64</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 65</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 66</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 67</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 68</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 69</td><td>bla</td><td>bla blub</td></tr>
<tr class="rot"><td id="a2">Reihe 70</td><td>System</td><td>Error Message</td></tr><tr><td>Reihe 71</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 72</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 73</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 74</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 75</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 76</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 77</td><td>bla</td><td>bla blub</td></tr>
<tr><td>Reihe 78</td><td>bla</td><td>bla blub</td></tr><tr><td>Reihe 79</td><td>bla</td><td>bla blub</td></tr></tbody></table>
<button id="go">Zur Nächsten System Nachrichten Springen</button>
<script>
var s=0;
var h1=0;
var t=0;
setTimeout(function(){
//ae=document.querySelectorAll('.rot');
$('#go').click(function(){
ae=document.querySelector('#a'+h1);
// ae=ae[h];//.children[0];
console.log(ae)
//a=200*h1;//
a1=ae.offsetTop-70;
console.log(a1,h1)
hh1=$('tbody').scrollTop();
console.log(a1,hh1)
$('tbody').animate({
scrollTop :hh1+a1+'px',
}, 500);
if(h1==2){
h1=0;
$('tbody').animate({
scrollTop :h1+'px',
}, 500);
}else{
h1++;
}
});
},1000);
</script>