JS获取表格 按钮所在的行上的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript">
<!--
function check(button){
//执行删除行的操作
alert("执行删除行的操作");
var index = -1;
for(var i=0; i<fm.but.length ;i++){
if(fm.but[i] == button){
index = i;
break;
}
}
alert("行"+(index+1)+" 元素值为 "+fm.one[index].value+"\t"+fm.two[index].value);
}
//-->
</script>
<body>
<form method="post" action="" name="fm">
<table name="tab" >
<tr>
<td> <input type="text" name="one"></td>
<td><input type="text" name="two"></td>
<td><input type="button" value="检查--删除" name="but" onclick="check(this)"></td>
</tr>
<tr>
<td> <input type="text" name="one"></td>
<td><input type="text" name="two"></td>
<td><input type="button" value="检查--删除" name="but" onclick="check(this)"></td>
</tr>
<tr>
<td> <input type="text" name="one"></td>
<td><input type="text" name="two"></td>
<td><input type="button" value="检查--删除" name="but" onclick="check(this)"></td>
</tr>
<tr>
<td> <input type="text" name="one"></td>
<td><input type="text" name="two"></td>
<td><input type="button" value="检查--删除" name="but" onclick="check(this)"></td>
</tr>
</table>
</form>
</body>
</html>
分享到：
开发了好几年从上个月准备，写博客文章，看到有人回复，很激动，希望能持续写下去。帮助别人，也是一个自己的积累，
相关推荐
在JavaScript中，获取用户在网页上交互时点击的特定元素及其相关信息是一项常见的需求，尤其是在处理表格数据时。本文将详细讲解如何在JavaScript中实现当用户点击表格内的按钮单元格时，获取该按钮所在的行信息。 ...
` 获取被删除按钮所在的行。 - `var tbl = tr.parentElement;` 获取包含该行的表格。 - `if (tr.rowIndex >= 1)` 检查当前行索引是否大于或等于1（索引从0开始），如果是，意味着它不是表头行，可以被删除。 - `...
在本教程中，我们将深入探讨如何利用jQuery技术实现表格（table）元素的上下移动，以此来改变表格行（tr）的顺序，以满足用户自定义排序的需求。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素...
通过访问这个按钮的父节点，找到其所在的`<tr>`，并获取该行在表格中的索引。然后，使用`deleteRow(rowIndex)`方法从表格中移除这一行。 ### 示例代码分析 ```javascript function addRow() { var table = ...
因此，可以考虑使用事件委托，将事件监听器添加到表格的父元素上，而不是每个单独的按钮，从而减少内存占用和提高性能。 总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是...
在动态排序中，我们需要获取并修改表格的DOM元素，包括表头（th）和单元格（td），可能涉及到`getElementsByTagName`、`querySelectorAll`等方法。 4. **数据存储与遍历**：在实现排序前，先将表格数据存储为数组，...
- 使用jQuery，可以获取表格引用，例如`$("#myTable")`，其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素，可以使用`$('<tr>')`，然后添加`<td>`元素。 - 添加内容，例如`$('<td>').html('新数据')`。 - 将新...
这个参数代表触发删除操作的元素（在这个案例中是删除按钮），通过`r.parentNode.parentNode.rowIndex`我们可以获得当前按钮所在的行（`<tr>`标签）的索引。然后通过`document.getElementById('myTable').deleteRow...
在JavaScript编程领域中，"单击删除所在地行演示"是一个常见的功能需求，特别是在网页上的数据展示，例如表格数据。这个功能允许用户通过点击表格中的某一行来删除该行数据，通常用于管理类的Web应用，如订单管理、...
此机制允许用户在网页上动态地添加或删除表格行，并通过图标来切换这两种操作。为了更好地理解这段代码的工作原理，我们将详细分析其结构、功能以及具体实现方式。 #### 二、关键变量 - **`var tbNum = 2;`**：用于...
获取当前按钮所在的行 (`objSourceRow`) 和表 (`objTable`)。 2. 如果按钮的值为“增加”： - 增加行索引 `rowIndex`。 - 使用 `insertRow(rowIndex)` 插入新行。 - 通过 `insertCell()` 创建单元格，并填充...
这里我们使用`document.getElementById`获取表格元素，然后定义函数来添加和删除行： ```javascript function addRow() { var table = document.getElementById("dynamicTable"); var newRow = table.insertRow(-...
它通过`parentNode`属性找到所在行，然后调用`removeChild`方法将其从表格中移除。 总结一下，这个JavaScript实现的动态表格涉及到以下核心概念： 1. **DOM操作**：通过`getElementById`获取元素，使用`...
通过 `input.parentNode.parentNode.firstChild.innerHTML` 获取该按钮所在行的第一列的内容作为 `metalId`。 - **条件判断**：使用 `if...else` 语句判断按钮的值，如果值为“修改”，则调用 `damicSubmit` 函数；...
通过多次调用`parentNode`，可以找到要删除的行所在的`<tr>`元素。然后，使用`removeChild()`方法移除该行。注意，这里的删除仅限于前端显示，实际应用中还需要同步更新后台数据库。 7. **数据绑定**： 示例中的...
本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态添加、删除行以及对齐剩下的元素下标等功能。 #### 二、关键函数解析 ##### 1. `get_Element` 函数 该函数用于获取指定标签名的DOM元素...
这段代码首先获取触发点击事件的按钮所在的行，然后找到其相邻的行。如果存在相邻行，就将当前行与相邻行进行位置互换。`insertBefore()` 和 `insertAfter()` 方法是jQuery提供的用于操作DOM元素的移动方法。 在...
此函数中，通过获取当前按钮所在的行索引，利用 `insertRow(rowIndex)` 在特定位置插入一行。 ### 事件处理 **上移** ```javascript function Move_up(button) { // 获取当前行索引 var index = button....
常见的方法是通过JavaScript或jQuery来操作DOM，向表格中添加新的`<tr>`元素，并确保新添加的行样式和功能与现有的表格行保持一致。 #### 利用原生JavaScript实现动态添加行 虽然使用jQuery可以简化DOM操作的过程，...
实验过程应包括编写和测试JavaScript代码，例如，用`getElementsByTagName('tbody')[0].getElementsByTagName('tr')`获取表格中的行，或者用`getElementById('tab1').tBodies[0].rows`同样达到目的。对于删除操作，...