动态行的CSS不起作用

Question

<html>
<head>
    <title>truck page</title>
    <style type="text/css">
        tr {
            padding: 4px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <?php 
        $db = new mysqli("localhost", "root", "", "db1");
        function getdata($form_element_name) {
            $var = strip_tags($_GET[$form_element_name]);
            return $var;
        }
    ?>
    <fieldset>
        <legend> add a new truck </legend>
        <form action="<?php echo $_SERVER['PHP_SELF']?>" method="GET"> 
            <label>truck number <input type="text" name="truck_number" /></label>
            <label>owner name <input type="text" name="truck_owner_name" /></label>
            <label>owner phone <input type="text" name="truck_owner_ph" maxlength="10" /></label>
            <input type="submit" name="truck_add"  value="add" />
            <input type="reset" />              
        </form>
        <?php if(isset($_GET['truck_add'])) {
            $truck_number = getdata('truck_number');
            $truck_owner_name = getdata('truck_owner_name');
            $truck_owner_ph = getdata('truck_owner_ph');
            $sql_truck_add = "INSERT INTO truck (truck_number, truck_owner_name, truck_owner_ph) 
                                            VALUES ('$truck_number', '$truck_owner_name', '$truck_owner_ph' )"; 
            $result_truck_add = $db->query($sql_truck_add);     
            header("Location: http://localhost/bkp/truckpage.php");             
        } ?>
    </fieldset>
    <table>
        <tr>
            <th>truck number</th>
            <th>owner name</th>
            <th>phone</th>
            <th>operation</th>
            <th></th>
        </tr>
        <?php
        $sql_truck_retrieve = "SELECT * from truck";
        $result_truck_retrieve= $db->query($sql_truck_retrieve);
        while($row=$result_truck_retrieve->fetch_assoc()) { 
            $truck_num_current = $row['truck_number']; ?>
            <tr id="<?php echo "{$truck_num_current}"; ?>">
                <td><?php echo "{$row['truck_number']}"; ?></td>
                <td><?php echo "{$row['truck_owner_name']}"; ?></td>
                <td><?php echo "{$row['truck_owner_ph']}"; ?></td>
                <td>
                    <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="GET">
                        <input type="hidden" name="truck_numcur" value="<?php echo "{$row['truck_number']}"; ?>" />
                        <input type="submit" name="truck_update" value="update" />
                        <input type="submit" name="truck_delete" value="delete" />
                    </form>
                </td>
                <td>
                    <?php // action to be taken if either update or delete is selected
                    if(isset($_GET['truck_update'])) { 
                        $truck_numcur = $_GET['truck_numcur'];
                        if($truck_numcur == $truck_num_current) { ?>
                            <form action="<?php $_SERVER['PHP_SELF'] ?>" method="GET">  
                                <input type="hidden" name="truck_update_num" value="<?php echo "{$truck_numcur}"; ?>" />
                                <input type="text" name="truck_num_update" placeholder="truck number" />
                                <input type="text" name="owner_name_update" placeholder="owner name" />
                                <input type="text" name="owner_phone_update" placeholder="owner phone" />
                                <input type="submit" value="save" name="truck_update_yes" />
                                <input type="submit" value="cancel" name="truck_update_no" />
                            </form>
                        <?php }
                    }
                    else {
                        if(isset($_GET['truck_delete'])) {
                            $truck_numcur = $_GET['truck_numcur'];
                            if($truck_numcur == $truck_num_current) {
                            ?>
                                <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="GET">
                                    <span>confirm? </span>
                                    <input type="hidden" name="truck_del_num" value="<?php echo "{$truck_numcur}"; ?>" />
                                    <input type="submit" name="truck_delete_yes" value="yes" />
                                    <input type="submit" name="truck_delete_no" value="no" />
                                </form>
                            <?php }
                        }
                    }
                    //
                    // action to be taken after delete confirmation
                    if(isset($_GET['truck_delete_yes']))  {
                        $truck_del_num = $_GET['truck_del_num'];
                        $sql_truck_del = "DELETE from truck WHERE truck_number = '{$truck_del_num}'";
                        $result_truck_del = $db->query($sql_truck_del);
                        header("Location: http://localhost/bkp/truckpage.php");
                    }
                    else {
                        if(isset($_GET['truck_delete_no'])) {
                            header("Location: http://localhost/bkp/truckpage.php");
                            //---------------------------------------------------------------------------
                            //header("Location: http://localhost/bkp/truckpage.php/#$truck_num_current");
                            //---------------------------------------------------------------------------
                        }
                    }
                    //
                    // action to be taken after update confirmation
                    if(isset($_GET['truck_update_yes'])) {
                        $truck_update_num = $_GET['truck_update_num'];
                        $truck_num_update = getdata('truck_num_update');
                        $owner_name_update = getdata('owner_name_update'); 
                        $owner_phone_update = getdata('owner_phone_update');
                        $sql_truck_update = "UPDATE truck SET truck_number = '$truck_num_update', truck_owner_name = '$owner_name_update', truck_owner_ph = '$owner_phone_update' WHERE truck_number = '{$truck_update_num}' ";
                        $result_truck_update = $db->query($sql_truck_update);
                        header("Location: http://localhost/bkp/truckpage.php");
                    }
                    else {
                        if(isset($_GET['truck_update_no'])) {
                            header("Location: http://localhost/bkp/truckpage.php");
                        }
                    }
                    //
                    ?>
                </td>
            </tr>
        <?php } ?>  
    </table>
</body>

I am trying to extract values from a db table and add them as table rows. 我试图从数据库表中提取值，并将它们添加为表行。 The rows are being shown correctly but when I tried to add css styles for the table rows it did not work. 这些行被正确显示，但是当我尝试为表行添加css样式时，它行不通。 I tried to give a border and padding.I am new to web development and cannot understand why the css part is not working.Can anyone please tell how to make the css part work in this php code? 我试图给边框和填充。我是Web开发的新手，无法理解css部分为何不起作用。有人可以在此php代码中告诉如何使css部分工作吗？

Answer 1

The problem lies in that you cannot very effectively style tr elements. 问题在于您不能非常有效地设置tr元素的样式。 You will need to target the parent table or the child td elements to get the affect you're looking for. 您将需要定位父table或子td元素，以获取所需的影响。

Check out this JSFiddle example: http://jsfiddle.net/v6zNt/ 看看这个JSFiddle示例： http : //jsfiddle.net/v6zNt/

CSS: CSS：

table {
    border: 1px solid #000;
}

/* notice how these styles does not apply anywhere */
tr {
    border: 1px solid green;
    padding: 4px;
}

td {
    border: 1px solid red;
    padding: 4px;
}

HTML: HTML：

<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>

You can style tables, it's just that they have their own set of rules that you need to be mindful of. 您可以为表格设置样式，只是它们有自己需要注意的一组规则。 Here's a great introduction: http://css-tricks.com/complete-guide-table-element/ 这是一个很棒的介绍： http : //css-tricks.com/complete-guide-table-element/

动态行的CSS不起作用

问题描述

1 个解决方案

解决方案1
1 2014-06-12 19:28:28

动态行的CSS不起作用

问题描述

1 个解决方案

解决方案1 1 2014-06-12 19:28:28

解决方案1
1 2014-06-12 19:28:28