表格单元格附加在表格行的外部而不是内部
劳伦斯·德索萨
HTML：
<table class="table table-bordered table-hover">
<thead>
<tr class="warning">
<th> Date </th>
<th> Teacher </th>
<th> Join conference </th>
</tr>
</thead>
<tbody id="lessons_tbody"></tbody>
</table>
使用Jquery 3.2.1，我有以下代码：
$.each(ev, function(key,lesson) {
$('<tr class="active">').appendTo('#lessons_tbody');
$.each(lesson, function(key2, value){
if(key2=='url')
$('#lessons_tbody').append('<td><a href="'+value+'"><button class="btn btn-primary">Launch Lesson</button></a></td>');
else
$('#lessons_tbody').append('<td>'+value+'</td>');
});
$('</tr>').appendTo('#lessons_tbody');
});
这是生成的HTML：
<tbody id="lessons_tbody">
<tr class="active"></tr>
<td>2020-06-23 12:00:00</td>
<td>Testi Test</td>
<td><a href="/conference/lesson/47/"><button class="btn btn-primary">Launch Lesson</button></a></td>
</tbody>
我需要将td单元格放在表格行元素中（...）
编辑1-Json回应：
斯瓦蒂
您可以append使用创建在某些变量中的html +=，最后将其附加到tbody。
演示代码：
//your response
var ev = [{
lessonDate: " 2020-08-12 12:40",
teacher: "abc",
url: "htp://ww.abc.com"
}, {
lessonDate: " 2020-09-12 10:40",
teacher: "abc1",
url: "htp://ww.abc1.com"
}, {
lessonDate: "2020-02-12 12:40",
teacher: "abc2",
url: "htp://ww.abc2.com"
}];
var html = "";
$.each(ev, function(key, lesson) {
//append tr in html variable
html += '<tr class="active">';
$.each(lesson, function(key2, value) {
if (key2 == 'url')
html += '<td><a href="' + value + '"><button class="btn btn-primary">Launch Lesson</button></a></td>';
else
html += '<td>' + value + '</td>';
});
html += '</tr>';
});
$("#lessons_tbody").append(html) //append row to tbody<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
<thead>
<tr class="warning">
<th> Date </th>
<th> Teacher </th>
<th> Join conference </th>
</tr>
</thead>
<tbody id="lessons_tbody"></tbody>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
IE 11中的FormData未定义
- 3
计算数据帧R中的字符串频率
- 4
如何在R中转置数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
Excel 2016图表将增长与4个参数进行比较
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 9
OpenCv：改变 putText() 的位置
- 10
ActiveModelSerializer仅显示关联的ID
- 11
算术中的c ++常量类型转换
- 12
如何开始为Ubuntu开发
- 13
将加号/减号添加到jQuery菜单
- 14
去噪自动编码器和常规自动编码器有什么区别？
- 15
获取并汇总所有关联的数据
- 16
OpenGL纹理格式的颜色错误
- 17
在 React Native Expo 中使用 react-redux 更改另一个键的值
- 18
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 19
TreeMap中的自定义排序
- 20
Redux动作正常，但减速器无效
- 21
如何对treeView的子节点进行排序
我来说两句