Próbuję pętli przez każdą kolumnę w stole i uzyskać szerokość największej komórki w tej kolumnie i wstawić tę szerokość wartości w tablicy.

Mój stół wygląda jak To

Więc największa komórka w pierwszej kolumnie nazwa powinna być Brielle Williamson i największa komórka w pierwszej kolumnie pozycja powinna być dyrektor wykonawczy (silny> dyrektor wykonawczy ( CEO) i tak dalej ...

Wkładam szerokość tych komórek w tablicy, która będzie wyglądać taka var widths = ["70", "90", "60",....];

Oto mój kod

var max = 0; 
 var i = 0;
 var j = 0;
 var arr = [];
 
 for (i = 1; i < 7; i++) { 
 $('table tbody tr td:nth-child('+ i +')').each(function() {
    max = Math.max($(this).width(), max); });
    arr[j] = max;     
 		j = j + 1;    
} 

alert(JSON.stringify(arr));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            </tbody>
</table>

Nie rozumiem, co jest nie tak z moim kodem. Nadal ma maksymalną szerokość we wszystkich tabeli nie z każdej kolumny. Proszę o wszelkie sugestie?

0
JuniorDev 4 czerwiec 2018, 17:02

5 odpowiedzi

Najlepsza odpowiedź

Problem polega na tym, że używasz tej samej wartości max dla wszystkich kolumn.

Przesuń var max = 0; w pętli for (lub bardziej poprawnie, przywróć go do 0 za każdym razem, dzięki czemu JS Scoping Works).

var i = 0;
var j = 0;
var arr = [];
var max;

for (i = 1; i < 7; i++) {
  max = 0;
  $('table tbody tr td:nth-child(' + i + ')').each(function() {
    max = Math.max($(this).width(), max);
  });
  arr[j] = max;
  j = j + 1;
}

alert(JSON.stringify(arr));
th {text-align:left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>47</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Brenden Wagner</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td>28</td>
      <td>2011/06/07</td>
      <td>$206,850</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
  </tbody>
</table>

Mogą istnieć sposoby na poprawę kodu (np. Kolumna będzie miała taką samą szerokość w każdym rzędzie, więc nie ma potrzeby przeanalizowania wszystkich wierszy), ale pytanie było o tym, co było z tym nie tak i dlaczego zawsze dała taką samą wartość.

0
freedomn-m 4 czerwiec 2018, 14:36

Przykład w czystym javascript.

        var trs  = document.querySelectorAll('tbody tr'),
            cols = 0,           // Columns length
            rows = trs.length,  // Rows length
            res  = [],          // Result
            txt  = [];          // Text values

        for(var i=0; i<rows; i++){
            var row = trs[i],
                tds = row.querySelectorAll('td');

            if(res.length == 0){
                cols = tds.length;
                res  = new Array(cols);
            }

            for(var e=0; e<tds.length; e++){
                var td = tds[e];

                // Wrap text to inline element
                td.innerHTML = '<span>'+td.innerText+'</span>';

                var sp = td.querySelector('span');

                if(!res[e] || res[e] < sp.offsetWidth){
                    res[e] = sp.offsetWidth;
                    txt[e] = sp.innerText;
                }

                // Unwarp after calculating
                td.innerHTML = td.innerText;
            }
        }

        console.log(res);
        console.log(txt);
0
Vitalii 4 czerwiec 2018, 14:52

Problem z kodem Czy powinieneś zresetować wartość max zmiennej do 0 na każdej iteracji nad nową kolumną.

Wciąż istnieje wiele obszarów do ponownego struktury kodu.

var max = 0; 
 var i = 0;
 var j = 0;
 var arr = [];
 
 for (i = 1; i < 7; i++) { 
    max =0;//<-- Note this change
    $('table tbody tr td:nth-child('+ i +')').each(function() {
       max = Math.max($(this).width(), max); 
    });
    arr[j] = max; 
    j = j + 1;    
} 

alert(JSON.stringify(arr));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            </tbody>
</table>
0
Tanmay 4 czerwiec 2018, 14:46

Możesz wziąć pierwszy wiersz w tbody, a następnie użyj metody map, aby uzyskać szerokości elementów td, gdzie jest każda kolumna td.

const columns = $("tbody tr:first td").map(function(i) {
  return $(this).width()
}).get();

console.log(columns)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>47</td>
      <td>2009/10/09</td>
      <td>$1,200,000</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Brenden Wagner</td>
      <td>Software Engineer</td>
      <td>San Francisco</td>
      <td>28</td>
      <td>2011/06/07</td>
      <td>$206,850</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
  </tbody>
</table>
0
Nenad Vracar 4 czerwiec 2018, 14:18

To dlatego, że zawsze trzymasz maksymalną wartość między kolumnami:

max = Math.max($(this).width(), max); });.

Stąd 201 powtórzy się. Jak stwierdzono w komentarzach Rajit, twoje kolumny automatycznie ustawiają na maksymalną szerokość komórek maksymalnej, więc nie musisz tego robić samodzielnie.

Ponadto masz jedną niepotrzebną pętlę, spróbuj tego (bez for):

 $('table thead tr th').each(function() {
    arr[j] = $(this).width();     
    j = j + 1;    
} 
0
Nomis 4 czerwiec 2018, 14:22