摘自：http://blog.163.com/terry_xt/blog/static/90259482007782214286/
最近因开发需要，需动态创建table，并能对tr的顺序进行调整，所以写了下面这个小DEMO。
<HTML>
<HEAD>
<TITLE>TestTable</TITLE>
<script>
function submitTable() {
var trArray = document.getElementsByName("nameTr");
if (trArray) {
for (var i = 0; i < trArray.length; i++) {
var tr = trArray[i];
var tdArray = tr.getElementsByTagName("td");
var index = tdArray[0].innerHTML;
var name = tdArray[1].innerHTML;
alert(index + ": " + name);
}
}
}
function addNameTR() {
var userName = document.getElementById("nameText").value;
var table = document.getElementById("tableBody");
var tr = document.createElement('tr');
tr.id = "nameTr";
table.appendChild(tr);
var td1 = document.createElement('td');
tr.appendChild(td1);
td1.appendChild(document.createTextNode(getNameTrIndex()));
var td2 = document.createElement('td');
tr.appendChild(td2);
td2.appendChild(document.createTextNode(userName));
var td3 = document.createElement('td');
tr.appendChild(td3);
var upHref = "<a href='javascript:void(0);' onclick=\"upTR(this);\">上移</a>";
var downHref = "<a href='javascript:void(0);' onclick=\"downTR(this);\">下移</a>";
var delHref = "<a href='javascript:void(0);' onclick=\"delTR(this);\">删除</a>";
td3.innerHTML = upHref + " " + downHref + " " + delHref;
}
function getNameTrIndex() {
var table = document.getElementById("tableBody");
var trArray = document.getElementsByName("nameTr");
if (trArray) {
return trArray.length;
}
else {
return 1;
}
}
function upTR(link) {
var table = document.getElementById("tableBody");
var selectedTr = link.parentElement.parentElement;
var preTr = selectedTr.previousSibling;
if (preTr && preTr.id != "topTr") {
var selectedIndex = selectedTr.getElementsByTagName("td")[0].innerHTML;
selectedTr.getElementsByTagName("td")[0].innerHTML =
preTr.getElementsByTagName("td")[0].innerHTML;
preTr.getElementsByTagName("td")[0].innerHTML = selectedIndex;
table.insertBefore(selectedTr, preTr);
}
}
function downTR(link) {
var table = document.getElementById("tableBody");
var selectedTr = link.parentElement.parentElement;
var nextTr = selectedTr.nextSibling;
if (nextTr) {
var selectedIndex = selectedTr.getElementsByTagName("td")[0].innerHTML;
selectedTr.getElementsByTagName("td")[0].innerHTML =
nextTr.getElementsByTagName("td")[0].innerHTML;
nextTr.getElementsByTagName("td")[0].innerHTML = selectedIndex;
table.insertBefore(nextTr, selectedTr);
}
}
function delTR(link) {
if (window.confirm("确认删除？")) {
var table = document.getElementById("tableBody");
var selectedTr = link.parentElement.parentElement;
while(selectedTr.nextSibling) {
selectedTr = selectedTr.nextSibling;
selectedTr.getElementsByTagName("td")[0].innerHTML -= 1;
}
table.removeChild(link.parentElement.parentElement);
}
}
</script>
</HEAD>
<BODY>
<table border="1" bordercolor='#000000' align="center"
style="border-collapse:collapse;width:500px">
<tbody id="tableBody">
<tr id="topTr">
<td width="200px"><input type="text" name="nameText"></td>
<td width="150px">
<input type="button" value="Add" onclick="addNameTR()">
</td>
<td width="150px">
<input type="button" value="Submit" onclick="submitTable();">
</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
分享到：
相关推荐
它首先清空已有的表格数据，然后根据返回的主题列表动态创建新的表格行（Tr）和单元格（Td）。这里使用了循环来遍历主题列表，并为每个主题创建一个新的行和单元格。每个单元格内插入了一个复选框（Checkbox）用于...
如果表格数据是动态加载或从服务器获取的，移动行后可能需要通过Ajax异步请求将新的顺序发送回服务器，以保持数据的一致性。这通常涉及`$.ajax()`或`$.getJSON()`等方法。 5. 动画效果： jQuery库还提供了丰富的...
整个过程中，重点是要理解如何通过JavaScript动态地修改DOM结构来实现特定的用户交互效果，特别是在处理表格数据时，这种操作非常有用。此外，通过这种方式也可以加深对DOM事件处理以及DOM遍历和修改的理解。
用户可以通过简单的拖放操作来调整表格列的顺序，极大地提高了用户在查看和管理大量数据时的灵活性和便利性。 在Web开发中，用户体验（UX）是至关重要的，特别是在处理复杂的数据展示时。BootstrapTable 提供的拖拽...
在前端开发中，JavaScript（JS）是一种至关重要的脚本语言，尤其在构建交互式用户界面时。本话题聚焦于“js实现点击table表头字段带箭头标示”，这是一个常见需求，特别是在数据展示和管理中。它使得用户可以通过...
本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的详细说明： 1. **HTML表格结构**： 在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<th>`表示...
在JavaScript中，对HTML表格（`<table>`）进行排序是一项常见的需求，特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，...
"js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先，我们需要理解HTML表格的基本结构，包括`<table>`,`<tr>`,`<th>`和`<td>`等元素。`...
在网页开发中，JavaScript（简称JS）是一种必不可少的脚本语言，它被广泛用于实现页面交互和动态功能。本文将详细讲解如何使用JS对页面上的HTML表格数据进行排序，以便用户点击表头时能直接触发排序操作。 首先，...
在这个实例中，我们将深入探讨JavaScript如何实现表格的动态排序。 首先，我们需要理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始，包含若干行`<tr>`和单元格`<td>`。表头通常位于`<thead>`部分，而数据...
JavaScript表格排序是网页开发中常见的需求，特别是在处理动态数据或者用户交互时。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML `<table>`元素的基本结构。一个表格由`...
标题中的“功能很强大的Table”指的是在网页设计中...总的来说，创建一个功能强大的Table需要结合HTML、CSS和JavaScript的知识，通过合理的布局、美观的设计和实用的功能，提高用户在网页上操作数据的效率和满意度。
在创建表格时，可以使用`<table>`, `<tr>`, `<th>`和`<td>`等HTML标签，通过JQuery动态生成并插入到页面中。 此外，提到的“叠加的显示”可能指的是表格中的某些部分可以叠加在其他部分之上，这可能涉及到CSS的定位...
"table + js 排序"是指利用JavaScript在HTML表格中实现动态排序的功能。下面将详细阐述这一技术的知识点。 首先，HTML的`<table>`元素是用于创建表格的标准方式，它包含`<thead>`（表头）、`<tbody>`（主体）和`...
在使用Bootstrap Table时，首先需要在HTML中声明表格，并通过JavaScript初始化设置。例如： ```javascript $('#table').bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, ...
"jQuerytabletd"可能是指使用jQuery来操作表格（table）中的行（tr）和单元格（td）。以下是一个详细的实现步骤： 1. **事件监听**：首先，我们需要监听用户的鼠标操作，通常是mousedown和mousemove事件。当用户...
在JavaScript中，操作HTML表格（Table）进行排序是一项常见的任务，尤其在动态数据展示和用户交互中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们需要理解HTML表格的基本结构。一个HTML...
在网页开发中，jQuery是一个非常流行的...这一功能常用于数据管理界面，允许用户通过交互调整数据顺序。 首先，你需要确保已经下载并引入了jQuery库。通常，可以通过在HTML文件中添加以下代码来引入jQuery： ```html ...
3. **初始化插件**：通过JavaScript代码调用SmartTable插件，应用到目标表格元素上，并配置相应的选项，如排序规则、过滤条件等。 ```javascript $(document).ready(function() { $('#myTable').smartTable({ // ...
jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个表格由`<table>`元素包含，其中包含`<tr>`（行）和`<td>`（单元格）。使用jQuery，...