`

JS获取表格 按钮所在的行上的元素

阅读更多
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>


0
0
分享到:
评论
3 楼 314649444 2013-05-31  
liminjun 写道
liminjun 写道
引用
for(var i=0; i<fm.but.length ;i++)

楼主您这里的fm.but对象是从哪里来的?是写错了,还是有上下文。


不好意思,我看到了你的form的name为fm,input的name为but,之前没有看到过这种写法。误解你了。




欢迎光临,   开发了好几年从上个月准备,写博客文章,看到有人回复,很激动,希望能持续写下去。帮助别人,也是一个自己的积累,
2 楼 liminjun 2013-05-29  
liminjun 写道
引用
for(var i=0; i<fm.but.length ;i++)

楼主您这里的fm.but对象是从哪里来的?是写错了,还是有上下文。


不好意思,我看到了你的form的name为fm,input的name为but,之前没有看到过这种写法。误解你了。
1 楼 liminjun 2013-05-29  
引用
for(var i=0; i<fm.but.length ;i++)

楼主您这里的fm.but对象是从哪里来的?是写错了,还是有上下文。

相关推荐

    JQuery实现动态表格点击按钮表格增加一行

    ` 获取被删除按钮所在的行。 - `var tbl = tr.parentElement;` 获取包含该行的表格。 - `if (tr.rowIndex &gt;= 1)` 检查当前行索引是否大于或等于1(索引从0开始),如果是,意味着它不是表头行,可以被删除。 - `...

    JS获取单击按钮单元格所在行的信息

    在JavaScript中,获取用户在网页上交互时点击的特定元素及其相关信息是一项常见的需求,尤其是在处理表格数据时。本文将详细讲解如何在JavaScript中实现当用户点击表格内的按钮单元格时,获取该按钮所在的行信息。 ...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素...

    js删除本行代码

    通过访问这个按钮的父节点,找到其所在的`&lt;tr&gt;`,并获取该行在表格中的索引。然后,使用`deleteRow(rowIndex)`方法从表格中移除这一行。 ### 示例代码分析 ```javascript function addRow() { var table = ...

    jquery表格动态添加删除行代码.zip

    因此,可以考虑使用事件委托,将事件监听器添加到表格的父元素上,而不是每个单独的按钮,从而减少内存占用和提高性能。 总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是...

    豪华版js实现table动态排序

    在动态排序中,我们需要获取并修改表格的DOM元素,包括表头(th)和单元格(td),可能涉及到`getElementsByTagName`、`querySelectorAll`等方法。 4. **数据存储与遍历**:在实现排序前,先将表格数据存储为数组,...

    74、jquery表格动态添加删除行代码

    - 使用jQuery,可以获取表格引用,例如`$("#myTable")`,其中`#myTable`是表格的ID。 - 创建新的`&lt;tr&gt;`元素,可以使用`$('&lt;tr&gt;')`,然后添加`&lt;td&gt;`元素。 - 添加内容,例如`$('&lt;td&gt;').html('新数据')`。 - 将新...

    JS实现从表格中动态删除指定行的方法

    这个参数代表触发删除操作的元素(在这个案例中是删除按钮),通过`r.parentNode.parentNode.rowIndex`我们可以获得当前按钮所在的行(`&lt;tr&gt;`标签)的索引。然后通过`document.getElementById('myTable').deleteRow...

    单击删除所在地行演示(javascript)

    在JavaScript编程领域中,"单击删除所在地行演示"是一个常见的功能需求,特别是在网页上的数据展示,例如表格数据。这个功能允许用户通过点击表格中的某一行来删除该行数据,通常用于管理类的Web应用,如订单管理、...

    JS动态添控制表格

    此机制允许用户在网页上动态地添加或删除表格行,并通过图标来切换这两种操作。为了更好地理解这段代码的工作原理,我们将详细分析其结构、功能以及具体实现方式。 #### 二、关键变量 - **`var tbNum = 2;`**:用于...

    javascript实现动态增加删除表格行(兼容IE FF).docx

    获取当前按钮所在的行 (`objSourceRow`) 和表 (`objTable`)。 2. 如果按钮的值为“增加”: - 增加行索引 `rowIndex`。 - 使用 `insertRow(rowIndex)` 插入新行。 - 通过 `insertCell()` 创建单元格,并填充...

    js应用之动态增加,删除一行

    这里我们使用`document.getElementById`获取表格元素,然后定义函数来添加和删除行: ```javascript function addRow() { var table = document.getElementById("dynamicTable"); var newRow = table.insertRow(-...

    【JavaScript源代码】JavaScript实现简单动态表格.docx

    它通过`parentNode`属性找到所在行,然后调用`removeChild`方法将其从表格中移除。 总结一下,这个JavaScript实现的动态表格涉及到以下核心概念: 1. **DOM操作**:通过`getElementById`获取元素,使用`...

    javascript动态判断html元素并执行不同的操作.docx

    通过 `input.parentNode.parentNode.firstChild.innerHTML` 获取该按钮所在行的第一列的内容作为 `metalId`。 - **条件判断**:使用 `if...else` 语句判断按钮的值,如果值为“修改”,则调用 `damicSubmit` 函数;...

    JavaScript中动态向表格添加数据

    通过多次调用`parentNode`,可以找到要删除的行所在的`&lt;tr&gt;`元素。然后,使用`removeChild()`方法移除该行。注意,这里的删除仅限于前端显示,实际应用中还需要同步更新后台数据库。 7. **数据绑定**: 示例中的...

    JS 添加删除行

    本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态添加、删除行以及对齐剩下的元素下标等功能。 #### 二、关键函数解析 ##### 1. `get_Element` 函数 该函数用于获取指定标签名的DOM元素...

    jquery table 上下行移动互换

    这段代码首先获取触发点击事件的按钮所在的行,然后找到其相邻的行。如果存在相邻行,就将当前行与相邻行进行位置互换。`insertBefore()` 和 `insertAfter()` 方法是jQuery提供的用于操作DOM元素的移动方法。 在...

    JS 实现动态插入输入框以及删除、位置调换

    此函数中,通过获取当前按钮所在的行索引,利用 `insertRow(rowIndex)` 在特定位置插入一行。 ### 事件处理 **上移** ```javascript function Move_up(button) { // 获取当前行索引 var index = button....

    Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    常见的方法是通过JavaScript或jQuery来操作DOM,向表格中添加新的`&lt;tr&gt;`元素,并确保新添加的行样式和功能与现有的表格行保持一致。 #### 利用原生JavaScript实现动态添加行 虽然使用jQuery可以简化DOM操作的过程,...

    JavaScript程序设计——DOM访问实验报告.docx

    实验过程应包括编写和测试JavaScript代码,例如,用`getElementsByTagName('tbody')[0].getElementsByTagName('tr')`获取表格中的行,或者用`getElementById('tab1').tBodies[0].rows`同样达到目的。对于删除操作,...

Global site tag (gtag.js) - Google Analytics