javascript - Dynamically created get's lower position why?
问题描述
Below is the code snippet where I've created <th>
using jquery.
My question is, How can I place the dynamically created <th>
above the two <td>
's which I've created below.
I've tried to search a lot but all the results where adding to the end only, not to the top of the <td>
.
$(document).ready(
function() {
var noOfRow = document.getElementById("addItemTable").rows.length;
var temp = document.getElementById("addItemTable");
var table = temp.getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
var cell2 = row.insertCell(0);
var cell3 = row.insertCell(1);
cell2.innerHTML="this is inside table div";
cell2.style="border: dashed;"
cell3.innerHTML="this is inside another another div";
cell3.style="border: dashed;"
var thContent = '<th class="col2">' + '<br>' + 'test' + '   ' + '*' + '' + '</th>'
var mainTable = document.getElementById("addItemTable");
$('#addItemTable>tbody>tr').append(thContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
<table id="addItemTable">
<tbody>
</tbody>
</table>
</div>
解决方案
You must use prepend insead of append :)
$(document).ready(
function() {
var noOfRow = document.getElementById("addItemTable").rows.length;
var temp = document.getElementById("addItemTable");
var table = temp.getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
var cell2 = row.insertCell(0);
var cell3 = row.insertCell(1);
cell2.innerHTML="this is inside table div";
cell2.style="border: dashed;"
cell3.innerHTML="this is inside another another div";
cell3.style="border: dashed;"
var thContent = '<th class="col2">' + '<br>' + 'test' + '   ' + '*' + '' + '</th>'
var mainTable = document.getElementById("addItemTable");
$('#addItemTable>tbody>tr').prepend(thContent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
<table id="addItemTable">
<tbody>
</tbody>
</table>
</div>
推荐阅读
- c# - 如何确保winform文本框输入以特定数字开头?
- c# - Ajax 模态弹窗第一次没有显示
- serverless-framework - 如何连接到现有的无服务器部署
- java - 返回 JPA 实体导致内部服务器错误
- java - 当我有自定义存储库时,如何使用 Dockerfile 在 Docker 中运行 maven 项目
- c# - 从字节数组加载图像
- php - PHP 单元,使用单元测试测试 laravel 日志消息
- javascript - 重置表单自定义对象时,开始和结束更改为 null
- linkedin - 从 LinkedIn API 获取活动名称
- dart - 对象是什么
Dart 中的语法是什么意思?