如何为多页面PHP echo输出的tr标签添加类并设置CSS样式？

很简单，我来一步步教你怎么实现：

第一步：修改PHP代码，给tr标签添加类名 #

你只需要在echo输出tr标签的时候，像写静态HTML一样加上class属性就行。如果需要区分表头行和数据行，还可以给它们加不同的类名；甚至能根据行号生成动态类名，做斑马纹效果。

修改后的代码示例（结合你提供的片段）：

<html>
<head>
<title>View Records</title>
<!-- 记得引入你的CSS文件，这里假设叫styles.css -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<?php
include('connection.php');
$count=1;
$result=@mysql_query("SELECT * FROM form") or die(mysql_error());
echo "<table border='1' cellpadding='10'>";

// 给表头tr添加专属类名
echo "<tr class='table-header'> <th>ID</th> <th>其他字段</th> </tr>";

// 循环输出数据行
while($row = mysql_fetch_array($result)) {
    // 可以根据行号奇偶生成不同类名，实现斑马纹
    $rowClass = $count % 2 == 0 ? 'table-row even' : 'table-row odd';
    echo "<tr class='$rowClass'>";
    echo "<td>" . $row['id'] . "</td>";
    // 这里替换成你实际的字段
    echo "<td>" . $row['your_field_name'] . "</td>";
    echo "</tr>";
    $count++;
}
echo "</table>";
?>
</body>
</html>

第二步：在CSS文件中定义类的样式 #

打开你的CSS文件（比如上面引入的styles.css），添加对应的样式规则就行，比如：

/* 表头行样式 */
.table-header {
    background-color: #f2f2f2;
    font-weight: 700;
    text-align: center;
    color: #333;
}

/* 数据行基础样式 */
.table-row {
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

/* 偶数行斑马纹效果 */
.table-row.even {
    background-color: #f9f9f9;
}

/* 奇数行样式 */
.table-row.odd {
    background-color: #fff;
}

/* 鼠标悬停高亮 */
.table-row:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}

几个注意点 #

• 引号嵌套：PHP里如果用双引号包裹HTML字符串，里面的class属性值用单引号，避免引号冲突；反之也可以。
• 动态类名：如果不需要斑马纹，直接给所有数据行加同一个类名就行，比如echo "<tr class='table-row'>";。
• CSS引入：确保CSS文件路径正确，要是路径不对样式不会生效哦。

内容的提问来源于stack exchange，提问作者Cara J