Блог

Главная - Вопросы по программированию - Заголовок таблицы не выровнен со строками таблицы, вызываемыми ajax

Заголовок таблицы не выровнен со строками таблицы, вызываемыми ajax

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Результат Я использовал вызов ajax для извлечения данных для строк. Мой результат не показывает правильное форматирование таблицы. Строки отображаются в первом столбце заголовка. Я добавил заголовок таблицы в тело, поэтому я не уверен, связано ли это с этим или нет.

Пожалуйста, помогите мне выровнять заголовок и строки. Заранее спасибо.

Вот мой фрагмент кода:

 $(document).ready(function() {

  $.ajax({
    url: "/otcs/livelink.exe/open/WebReport1",
    dataType: 'html',
    async: true,
    success: function(result) {
      var $response = $(result);
      // console.log(result)
      var a = $(result).find("tr.GO").clone();
      $("#div1").html(a);
    }
  });
});

function Display1() {
  $("#TableHeading1").toggle();
  $("#div1").toggle();
} 
 table.Table {
  align: center;
  margin-right: 50px;
  font-family: calibri;
  border-collapse: collapse;
  width: 100%;
}

#TableHeading1>th {
  background-color: lightgrey;
  font-family: times new roman;
  font-size: 18px;
  border-style: double;
}

.GO>td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  border: 1px solid black;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="hide" style="display:none"></div>

<button type="button" style="font-family:calibri;font-size:25px;background-color:Teal;color:white;width:150px;height:50px;cursor:pointer;" onclick="Display1();">GO</button>

<div>
  <table class="Table">
    <tr id="TableHeading1" style="display:none">
      <th>Employee ID</th>
      <th>Name</th>
      <th>Mail address</th>
      <th>Phone Number</th>
      <th>Designation</th>
    </tr>
    <tr id="div1" style="display:none"></tr>
  </table>
</div>

Комментарии:

1. Я преобразовал ваш код в фрагмент кода, но от него мало пользы, поскольку: а) он вызывает ajax-вызов и б) нет никаких указаний на результаты этого ajax-вызова или что. GO может быть. Можете ли вы включить пример результата ajax?

2. Одна из проблем может заключаться в том, что вы $("tr.GO").clone() затем вставляете это внутри другого tr , то есть вкладываете tr. Ваш $("#div1").html(a); будет работать только в том случае, если a это содержимое одной строки, например <td>col1></td><td>col2</td> , которой оно не является, поскольку это клон tr

3.Вы не можете вложить a tr непосредственно в a tr . Самым быстрым решением, в зависимости от ваших фактических требований, было бы изменить $("#div1").html(a) на $("#div1").closest("body").html(a) (но тогда вы потеряете #div1) или var a = $(result).find("tr.GO").clone() на var a = $(result).find("tr.GO").clone().html() или добавить идентификатор в таблицу, $("#tableId > tbody").append(a) но из требований неясно, хотите ли вы заменить или добавить таблицу

4. Предоставление var a = $(result).find(«tr.GO»).clone().html() извлекает только первую строку, а остальные не отображаются

5. Понятия не имею, что вы подразумеваете под «выборкой в первой строке» — это фрагмент кода в одну строку для … извлечения первой строки… вам нужно что-то с этим сделать, например, добавить его в tbody таблицы.

Метки: