Question

如此屏幕截图所示，标题标题未与表格数据对齐。

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Writer's Tryst - Manage Uploads</title>
        <style>
            table { 
                border-spacing:0;
                border-collapse:collapse;
            }
            td, th {
                padding: 5px;
            }
            .nbr-pages {
                width:  48px;
                text-align: right;
                padding-right: 2px;
            }
            .delete {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h1>Manage Uploads</h1>
        <form id="form-manage-uploads">
            <table id="table-writer-uploads">  
                <tbody>              
                    <tr>
                        <th>Delete</th><th>TItle</th><th>Type</th><th>Genre</th><th>Length</th><th>PDF</th><th>Save</th>                
                    </tr>
                    <tr class="tr-clone" >
                        <td><img class="delete" src="img/icons/delete.png" alt="delete" /> </td>
                        <td><input class="id" name="id" type="hidden" /></td>
                        <td><input class="title" name="title" placeholder="Title" autofocus="true" /></td>
                        <td>
                            <select class="form-type" name="form-type">
                            </select>
                        </td>
                        <td>
                            <select class="genre" name="genre">
                            </select>            
                        </td>
                        <td><input class="nbr-pages" name="nbr-pages" required placeholder="Pages" /></td>
                        <td><a href="" class="synopsis" target="_blank">Synopsis</a></td>
                        <td><input type="button" class="save btn btn-custom-primary" value="Save" /></td>
                        <td><input type="hidden" class="id" name="id" /></td>
                    </tr>
                </tbody>
            </table>
            <input class="current-id" type="hidden" />

        </form>
        <script src="js/common.js"></script>
        <script src="js/manage-uploads.js"></script>
    </body>
</html>

该表是使用JavaScript构建的：

function getWritersData() {
    var data = {};
    data.action = 'get-writer-data';
    data["account-id"] = localStorage.getItem("account-id");
    ajax('post', 'php/manage-uploads.php', data, getSuccess, "Error retrieving writer's data: ");
    function getSuccess(data) {
        var trClone = $(".tr-clone");
        var jsonData = $.parseJSON(data);
        var count = 0;
        for (var key in jsonData) count++;
        if (key != undefined) {
            count--;
            $.each(jsonData, function (index, value) {
                trClone = trClone.clone().insertAfter($(".tr-clone:last"));
                trClone.find(".id").val(value.ID);
                trClone.find(".title").val(value.Title);
                trClone.find(".form-type").val(value.FormType);
                trClone.find(".genre").val(value.Genre);
                trClone.find(".nbr-pages").val(value.NumberOfPages);
                var filepath = "uploads/" + value.Filename;
                var synopsis = trClone.find(".synopsis");
                var sv = synopsis.val(filepath);
                synopsis.attr("href", filepath);
            });
        } else {
            $("h1").append("<br/><br/><div class='but-custom-warning'>No records were found.</div>"); //.css("disp
            $("table").css("display", "none");
        }
        $(".tr-clone:first").css("display", "none");
    }
}

Answer 1

隐藏输入有一个额外的表格列：

没有必要将它放在自己的表格单元格中，因此将其与其他单元格中的一个组合。

<td><input class="id" name="id" type="hidden" /><input class="title" name="title" placeholder="Title" autofocus="true" /></td>

Answer 2

你有一个额外的列，里面没有任何可见的内容：

<td><input class="id" name="id" type="hidden" /></td>

我建议你将隐藏字段放在另一列中或使用它：

<th colspan="2">Delete</th>

为什么跳过第一个表列？

2 个答案: