Почему первая колонка таблицы пропущена?

Как показано на этом снимке экрана, заголовок заголовка смещен с данными таблицы.Почему первая колонка таблицы пропущена?

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"); 
    } 
}

источник

2016-06-24 ron tornambe

'< input class = "id" name = "id" type = "hidden" /> 'не имеет соответствующих' ' –

Спасибо, всем. Это трюк. –

Улучшение HTML: вы должны использовать элемент thead – epascarello

Вы получили дополнительный столбец с ничего видимого в нем:

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

Я рекомендую вам поставить скрытое поле в другом столбце или использовать это:

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

источник

2016-06-24 19:35:15 Sebastian

У вас есть дополнительный столбец таблицы для скрытого ввода:

Там нет необходимо для этого быть в своей собственной ячейке таблицы, поэтому объедините ее с одной из других ячеек.

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

источник

2016-06-24 19:34:41 Barmar

Почему первая колонка таблицы пропущена?

ответ

Смежные вопросы