Comment définir la largeur de td en javascript-Questions et réponses frontales-php.cn

Comment définir la largeur de td en javascript

PHPz

Libérer： 2023-04-24 16:53:04

original

1611 Les gens l'ont consulté

JavaScript est un langage de programmation largement utilisé pour développer des sites Web et des applications. L'une des questions courantes en matière de conception Web est de savoir comment définir la largeur d'une cellule (td) dans un tableau. Cet article explique comment définir la largeur de td à l'aide de JavaScript.

Tout d'abord, examinons le code HTML montrant une mise en page Web de base avec un tableau :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>
</body>
</html>

Copier après la connexion

Dans cette mise en page Web de base, nous avons un tableau avec deux lignes et trois colonnes. Nous voulons maintenant définir la largeur de l'une des cellules. Nous pouvons y parvenir en suivant les étapes suivantes :

La première étape consiste à définir un identifiant pour chaque élément td. Par exemple, si nous voulons définir la largeur de la cellule 2, nous pouvons modifier le code html sous la forme suivante :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

Copier après la connexion

La deuxième étape consiste à définir la largeur de la cellule à l'aide du code JavaScript. Nous pouvons obtenir une référence à la cellule 2 en utilisant la fonction getElementById() en JavaScript et définir sa largeur à l'aide d'une propriété CSS. Par exemple, le code JS suivant définit la largeur de la cellule 2 à 200 pixels :

var cell2 = document.getElementById("cell2");   // 获取单元格2的引用
cell2.style.width = "200px";                     // 设置单元格2的宽度为200像素

Copier après la connexion

Troisième étape, intégrez le code ci-dessus dans HTML. Ajoutez le code suivant dans la balise head :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
    <script type="text/javascript">
        window.onload = function() {
            var cell2 = document.getElementById("cell2");
            cell2.style.width = "200px";
        };
    </script>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

Copier après la connexion

Le code ci-dessus définit la largeur de la cellule 2 à 200 pixels. Maintenant, lorsque nous ouvrirons la page, nous verrons que la largeur de la cellule 2 a été fixée à 200 pixels.

Avec les étapes ci-dessus, nous pouvons utiliser JavaScript pour définir la largeur de la cellule (td) dans le tableau. En obtenant une référence à une cellule et en utilisant les propriétés CSS pour définir la largeur de la cellule, nous pouvons redimensionner efficacement la cellule pour l'adapter aux besoins de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!