Beiträge von Henda

Henda · 6. November 2019

Hallo zusammen,

ich möchte die folgende Tabelle abbilden

html-seminar.de/woltlab/attachment/2083/

Ich habe einen Teil schon geschafft. Mir fehlt noch die Abbildung von Spalte1-Inhalt / Spalte2-Inhalt

Mein Code sieht so aus:

HTML: Tabelle

<table class="table table-bordered table-Test">
    <thead>
        <tr>
            <th rowspan="2">ID</th>
            <th rowspan="2">Datum</th>
            <th colspan="2">Spalte1</th>
            <th colspan="2">Spalte2</th>
            <th rowspan="2">Aktion</th>
        </tr>
        <tr>
              <th>a</th>
            <th>b</th>
            <th>a</th>
            <th>b</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td></td>
                                                
            <td>a-Inhalt</td>
            <td>b-Inhalt</td>
            
            <td>a-Inhalt</td>
            <td>b-Inhalt</td>    
            <td>Aktion</td>            
                                                        
        </tr>                                        
        .....
    </tbody>
</table>

Alles anzeigen

Ich wäre dankbar für einen Hinweis, wie kann ich das noch ergänzen.

Danke und Gruß

Henda · 6. November 2019

Das hat so wirklich funktioniert.

Ich kann zwar nicht genau erklären aber so habe ich das interpretiert:

querySelectorAll('table td .dunkel') heisst es alle Spalten die, die class=dunkel haben.

Da es vorher source.closest(tr) steht, dann wird eher nur in der Zeile gesucht, wo sich die checkbox befindet.

Also genau was ich gesucht habe.

Henda · 30. Oktober 2019

Hallo zusammen,

vielen Dank für Eure Tipps und Hinweise.

Diese haben mir geholfen!

Folgende Implementierung funktioniert:

Es werden nur die Checkboxes, die zur Class=dunkel gehören und die sich in der aktuellen Zeile befinden, selektiert.

Danke!

Code

JavaScript
<script type="text/javascript">function toggle(source) {       var checkboxes =  source.closest('tr').querySelectorAll('table td .dunkel') ; 	   for (var i = 0; i < checkboxes.length; i++) {        if (checkboxes[i] != source)            checkboxes[i].checked = source.checked;    }
}</script>
HTML
<td><input type="checkbox"
     th:field="*{listeConsumer[__${itemStat.index}__].antrag}" /></td>
                                                        
<td><input type="checkbox"
     th:field="*{listeConsumer[__${itemStat.index}__].x}" /><br>
     <input type="checkbox"  class="dunkel"
      th:field="*{listeConsumer[__${itemStat.index}__].xDunkel}" /></td>
<td><input type="checkbox"
     th:field="*{listeConsumer[__${itemStat.index}__].xx}" /><br>
     <input type="checkbox"  class="dunkel"
       th:field="*{listeConsumer[__${itemStat.index}__].xxDunkel}" /></td>
<td><input type="checkbox"
     th:field="*{listeConsumer[__${itemStat.index}__].xxx}" /><br>
     <input type="checkbox"  class="dunkel"
      th:field="*{listeConsumer[__${itemStat.index}__].xxxDunkel}" /></td>
<td><input type="checkbox"
     th:field="*{listeConsumer[__${itemStat.index}__].xxxx}" /><br>
      <input type="checkbox"   class="dunkel"
       th:field="*{listeConsumer[__${itemStat.index}__].xxxxDunkel}" /></td>
.....
                                                        
<td><br><input type="checkbox" id="select_all"  onClick="toggle(this)"
th:field="*{listeConsumer[__${itemStat.index}__].dunkelverarbeitung}" />
</td>

Alles anzeigen

Henda · 29. Oktober 2019

Hallo zusammen,

ich habe eine HTML-Seite mit einer generierten Tabelle, d.h. der Inhalt bzw. die Zeilen werden durch eine Funktion (Daten aus einer DB auslesen)

gefüllt.

Jede Zeile beinhaltet u.a. Checkboxes.

Die letzte Spalte in einer Zeile ist ein "Select-All"-Checkbox.

Ich möchte, wenn ich ein Hacken in den "Select-All"-Checkbox setzte, dann werden alle Checkboxes in dieser Zeile selektiert.

Momentan werden eher alle Checkboxes selektiert, weil ich mit der ID suche. die identisch für alle Zeile ist.

Ich suche eine Lösung um die RowIndex des selektierten Checkbox zu ermitteln und zu prüfen, nur wenn Checkbox in dieser Zeile ist dann einchecken.

Ich habe lange rumprobiert, aber vergeblich...

z.B.

var table = $('#xxxxtable').DataTable();

..

const row = document.getElementById('select_all');

var rowID = row.tabIndex ;

...

this.parentNode.parentNode.rowIndex

...

var colValue= this.dataItem($(e.currentTarget).closest("tr"));

Ich wäre dankbar wenn jemand hier weiterhelfen kann.

Danke

Code

<script type="text/javascript">
$(document).ready(function(){
    $('#select_all').on('click',function(){         
         if(this.checked){             
            $('.dunkel').each(function(){                  
                this.checked = true;            
            });
        }else{
             $('.dunkel').each(function(){             
                this.checked = false;   
             }
            });
        }
    });
    
    $('.checkbox').on('click',function(){
        if($('.dunkel:checked').length == $('.dunkel').length){
            $('#select_all').prop('checked',true);            
        }else{
            $('#select_all').prop('checked',false);            
        }
    });
});
</script>

Alles anzeigen

Beiträge von Henda

Komplexe Tabelle - rowspan und clospan

Javascript: Select-All Funktion in einer html Tabelle

Javascript: Select-All Funktion in einer html Tabelle

Javascript: Select-All Funktion in einer html Tabelle