#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
непосредственно в atr
. Самым быстрым решением, в зависимости от ваших фактических требований, было бы изменить$("#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 таблицы.