ron tornambe ron tornambe - 1 year ago 83
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


<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
table {
td, th {
padding: 5px;
.nbr-pages {
width: 48px;
text-align: right;
padding-right: 2px;
.delete {
cursor: pointer;
<h1>Manage Uploads</h1>
<form id="form-manage-uploads">
<table id="table-writer-uploads">
<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>
<select class="form-type" name="form-type">
<select class="genre" name="genre">
<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>
<input class="current-id" type="hidden" />

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

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) {
$.each(jsonData, function (index, value) {
trClone = trClone.clone().insertAfter($(".tr-clone:last"));
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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download