<html>
<head>
<script language="javascript" id="clientEventHandlersJS0">
<!--
var tLinkmanNowRowIndex
var var_rowIndex
iNowRowIndex=-1
tLinkmanNowRowIndex=-1
var_rowIndex=0
function btnAddLinkman_onclick() {
var newRow = tLinkman.insertRow();
//newRow.bgColor='#efefef';
var newCell0 = newRow.insertCell();
newCell0.className='table_body';
newCell0.width = '40';
newCell0.align = 'center';
var iRowLength = tLinkman.rows.length;
newCell0.innerText = iRowLength - 1 ;
var newCell1 = newRow.insertCell();
newCell1.className='table_body';
//newCell1.width = '16%';
newCell1.innerHTML = "<input type=text class=textfield id=linkmanName" + (iRowLength-1) + " maxlength=5 size =20 title='最大5个中文字符'>";
var newCell2 = newRow.insertCell();
newCell2.className='table_body';
newCell2.width = '16%';
newCell2.innerHTML = "<input type=text class=textfield id=linkmanPhone" + (iRowLength-1) + " maxlength=13 size =30 title='格式:xxx-xxxxxxxx 或 xxxx-xxxxxxx'>";
}
function btnDelRow_onclick(tablename) {
var itemp
itemp =-1
if ((eval(tablename + "NowRowIndex") + 1)>1)
{
itemp = eval(tablename+"NowRowIndex")
}
else
{
itemp = eval(tablename).rows.length -1
}
if (itemp >0)
{
if (confirm("确定要" + event.srcElement.value + " " + itemp +" 吗?"))
{
eval(tablename).deleteRow(itemp)
for (i=1;i<eval(tablename).rows.length;i++)
eval(tablename).rows[i].cells[0].innerText = i
}
}
//if (tableName=="tLinkman")
tLinkmanNowRowIndex = -1
}
function getRow(e)
{
event.cancellBulle=true
var itemp;
var tableName
var iNowRowIndex
itemp=-1
tableName=""
iNowRowIndex = -1
if (event.srcElement.tagName.toLowerCase() == "td")
{
iNowRowIndex = event.srcElement.parentElement.rowIndex ;
tableName = event.srcElement.parentElement.parentElement.parentElement.id.toString()
}
if (event.srcElement.tagName.toLowerCase() == "input")
{
iNowRowIndex = event.srcElement.parentElement.parentElement.rowIndex;
tableName = event.srcElement.parentElement.parentElement.parentElement.parentElement.id.toString()
//alert(tableName)
}
itemp = eval(tableName + "NowRowIndex")
if (itemp > 0)
{
eval(tableName).rows[itemp].bgColor = '#ffffff';
eval(tableName).rows[itemp].cells[0].innerText = itemp
}
if(iNowRowIndex > -1)
{
if(iNowRowIndex > 0)
{
eval(tableName).rows[iNowRowIndex].cells[0].innerHTML = '<font color=blue>►</font>'
eval(tableName).rows[iNowRowIndex].bgColor = '#efefef'
}
if (tableName=="tLinkman")
tLinkmanNowRowIndex = iNowRowIndex
}
}
//-->
</script>
</head>
<body>
<input language="javascript" id="btnAddLinkman" onclick="btnAddLinkman_onclick()"
type="button" value="增加联系人" name="btnAddLinkman">
<input language="javascript" id="btnDelLinkman" onclick="btnDelRow_onclick('tLinkman')"
type="button" value="删除联系人">
<table class="table_all" id="tLinkman" cellspacing="0" cellpadding="0" width="100%"
align="left" border="1">
<tr>
<td class="table_second_title" align="left" width="45">
行号</td>
<td class="table_second_title" align="left" width="80">
姓名</td>
<td class="table_second_title" align="left" width="80">
联系电话</td>
</tr>
</table>
</body>
</html>
<script language="javascript" id="clientEventHandlersJS">
<!--
tLinkman.onclick = getRow;
//-->
</script>
分享到：
相关推荐
博客"JavaScript动态添加删除表格行"很可能会深入讨论这些技术，并提供实际的代码示例，帮助读者理解和应用这些概念。通过阅读和学习，开发者可以掌握如何在实际项目中实现动态操作HTML表格的功能。
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
本示例集合将向你展示一系列基于JavaScript实现的网页特效，旨在帮助开发者理解和学习如何运用JavaScript来提升用户体验。 一、JavaScript基础 在探讨特效之前，我们需要了解JavaScript的基础。JavaScript是一种...
通过DOM，JavaScript可以改变HTML元素的样式、内容，添加或删除元素，实现页面动态更新。例如，使用document.getElementById方法可以获取指定ID的元素，然后修改其属性或内容。 异步编程在JavaScript中至关重要，...
总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...
在这个示例中，我们首先创建了一个包含图书信息的表格，并在每一行的操作列中添加了一个删除按钮。当用户点击删除按钮时，我们通过 JavaScript 获取该按钮的父元素行，并从表格中删除该行。 需要注意的是，这个示例...
同样，你可以根据需求修改这个示例，比如添加删除行的功能，或者改变单元格的内容和行为。理解这些基本原理后，就能灵活应对各种复杂的交互需求了。在实际项目中，你可能会遇到性能优化、兼容性处理、错误处理等问题...
在JavaScript中，事件处理是通过添加事件监听器来实现的，如`addEventListener`方法，使得当特定的用户行为发生时，可以执行预设的函数。DOM操作则包括获取元素、修改元素属性、插入或删除元素等，这些都是...
描述进一步解释了这个功能的实现方式，即通过JavaScript编程来响应用户的点击事件，执行相应的添加和删除操作。 在Web开发中，JavaScript是一种重要的客户端脚本语言，用于增强网页的交互性和动态性。它可以直接在...
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
通过提供的示例代码，我们可以了解到，在网页中，如何通过按钮点击事件，用JavaScript删除表格的当前行，以及如何添加新的行。 ### 删除当前行的实现 代码中定义了一个名为 `del(obj)` 的函数，这个函数接收一个...
实际应用中，你可能需要根据具体的业务逻辑调整这些示例，比如通过循环遍历所有行，或者根据特定条件（如用户点击某行的删除按钮）来添加或删除行。在`删除行.html`和`添加行.html`文件中，你应该能找到更详细的实现...
在JavaScript中，对HTML表格（`<table>`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...
《jQuery表格编辑添加删除行插件详解》 在网页开发中，表格是一种常见的数据展示方式，而jQuery作为JavaScript的一个强大库，提供了丰富的功能和便利的操作，使得表格的编辑、添加和删除行变得更加简单。本文将深入...
例如，getElementById()、getElementsByClassName()和getElementsByTagName()方法用于选择元素，appendChild()和removeChild()用于添加和删除元素，innerHTML属性用于获取或设置元素的HTML内容。 此外，JavaScript...
在这段示例代码中，展示了如何使用JavaScript结合jQuery库来实现对HTML表格的基本操作——添加行和删除行。 ### 知识点一：基本的HTML结构 示例代码提供了一个简单的HTML表格结构，包含一个有边框的表格（border='...
本篇文章将详细介绍两种jQuery实现动态添加删除行的方法。 ### 方法一：使用append()和remove() **添加行：** `append()`函数是jQuery中的一个方法，用于在元素末尾添加新的内容。在表格中添加新行，我们可以先...
本例子展示了如何使用 JavaScript 实现动态添加删除 HTML 元素，包括获取元素对象、添加新行、删除行等操作。通过这篇文章，我们可以更好地理解 JavaScript 和 HTML 之间的交互，并掌握动态添加删除 HTML 元素的技术...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></td> ...
以上就是使用JavaScript操作XML文件的基本步骤和示例。在实际应用中，可能还需要考虑错误处理、兼容性问题以及更复杂的逻辑操作。理解并熟练运用这些技术，可以帮助开发者在前端环境中有效地处理和操作XML数据。