Ändern der Objektbreite mit Fenstergröße mit jQuery

Question

Ich habe einige span-Objekte, die ich in eine Tabelle mit jQuery mit einem bestimmten width -Attribut einfügen. Ich möchte, dass sich die Breite dieser Objekte ändert, wenn sich die Fenstergröße ändert, da die Tabelle relative Position hat.

Hier ist mein Code (Das Snippet nicht das Problem sehr gut funktioniert zeigen - Fenstergröße zu ändern, aber es gibt eine Vorstellung von dem Kontext):

$(document).ready(function() { 
 
    var var1 = 2 
 
    var element = $('td').filter(function() { 
 
    var holidayText = $(this).contents()[0].textContent.trim(); 
 
    return parseInt(holidayText, 10) == var1; 
 
    }); 
 
    //need this to adjust with table size 
 
    var cell_width = element.width(); 
 

 
    var2 = 3; 
 
    var width = var2 * cell_width; 
 

 
    add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>'); 
 
});

div.class1 { 
 
    position: relative; 
 
} 
 

 
table { 
 
    border: 1px solid navy; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 

 
table th { 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 20px; 
 
} 
 

 
table td { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    text-align: right; 
 
    border: 1px solid #c6c6ec; 
 
    position: relative; 
 
} 
 

 
span.spanclass { 
 
    background-color: purple; 
 
    height: 14px; 
 
    display: inline-block; 
 
    padding: 2px; 
 
    left: 0; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Wie kann ich ein Breitenattribut erhalten/ein neues Attribut zuweisen, das bedeutet, dass diese Breite mit der Größe der Tabelle/des Fensters übereinstimmt? Benutze ich dafür em? Oder als prozentuale Breite?

Dank

Answer 1

Sie haben $ (Fenster) .resize() verwenden.

Ich habe das Skript geändert und es funktioniert für mich: https://fiddle.jshell.net/71rd84jy/

Lassen Sie mich wissen. Prost.

Answer 2

Warum js an erster Stelle?

$(document).ready(function() { 
 
    \t var var1 = 2 
 
\t var element = $('td').filter(function() { 
 
    var holidayText = $(this).contents()[0].textContent.trim(); 
 
    \t return parseInt(holidayText, 10) == var1; 
 
    \t }); 
 
    add_html = element.append('</br><span class="spanclass"></span>'); 
 
});

div.class1 { 
 
    position: relative; 
 
} 
 

 
table { 
 
    border: 1px solid navy; 
 
    width: 70%; 
 
    text-align: center; 
 
} 
 

 
table th { 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 20px; 
 
} 
 

 
table td { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    text-align: right; 
 
    border: 1px solid #c6c6ec; 
 
    position: relative; 
 
} 
 

 
span.spanclass { 
 
    background-color: purple; 
 
    height: 14px; 
 
    display: inline-block; 
 
    padding: 2px; 
 
    left: 0; 
 
    z-index: 1; 
 
    position: absolute; 
 
    width: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="class1"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>7</td> 
 
     <td>8</td> 
 
     <td>9</td> 
 
     <td>10</td> 
 
     <td>11</td> 
 
     <td>12</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Hinweis box-sizing: border-box; - es Breite 100% einschließlich 2px Polsterung machen, sonst wäre es [2px] + [100%] + [2px]