ron tornambe ron tornambe - 5 months ago 17
jQuery Question

Why is the first table column skipped?

As this screenshot shows, the Title header is misaligned with the table data.

enter image description here

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>


The table is built using 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

You got an extra column with nothing visible in it:

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

I'd recommend you put the hidden field in another column or use this:

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