`
andongoop
  • 浏览: 62200 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

我的动态添加表格的一行

jQueryIEFirefoxJavaScript浏览器 
阅读更多 
<html>
<head>
</head>
<script>
var row_times = 3;
function add_tr(){
	var atable = document.getElementById("atable");
	var atr = document.createElement("tr");
	atr.border="1";
	var atd = document.createElement("td");
	atd.border="1";
	atd.height="30";
	var anode = document.createTextNode("第" + row_times++ +"行");
	atd.appendChild(anode);
	atr.appendChild(atd) ;
	atable.appendChild(atr) ;
}
</script>
<body>
<form>
<table id="atable" name="atable" border="1" width="98%">
<tr><td><input type="button" value="添加一行" onclick="javascript:add_tr();"</td></tr>
<tr>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>
</form>
</body>
</html>

分享到：
| 我的js动态生成下拉列表框
评论
13 楼 andongoop 2009-09-16  
楼上那位大哥说的果然不错
在IE中table的子元素是tbody,在firefox中table的子元素是tr在这种情况下就涉及到一个兼容性的问题，一个比较不错的解决方案就是通过子元素去找父元素。要在IE中跑可以做如下修改
1、给table中的某一行加上id属性   例如：(id="atr")
2、获取tr然后通过tr拿到它的父元素。
3、将新增的tr加到父元素上。 
var row_times = 3;
function add_tr(){
	var firstRow = document.getElementById("firstRow");
	var atr = document.createElement("tr");
	atr.border="1";
	var atd = document.createElement("td");
	atd.border="1";
	atd.height="30";
	var anode = document.createTextNode("第" + row_times++ +"行");
	atd.appendChild(anode);
	atr.appendChild(atd) ;
	firstRow.parentNode.appendChild(atr);
}
12 楼 bimarcher 2009-09-15  
antiwise 写道
IE下跑不了


原因应该是IE下，table子是tbody吧？
楼主自己添加个不同浏览器的处理不就得了嘛。
更简单的方法，别获取table，获取一个始终存在的tr，然后使用tr.parentNode来appendChild新创建的行。
11 楼 bdceo 2009-09-15  
楼主是高开源的吧？哈哈，这代码也贴出来了...
10 楼 qiren83 2009-09-15  
有这么费事吗？ 倒 感觉小题大做了 随便找一个方式都更简单
9 楼 lobbychmd 2009-09-15  
Foxswily 写道
用jQuery一句话搞定的代码
$("#atable").append("<tr><td>新行</td></tr>");



$('atable tbody tr:first-child').clone().appendTo('atable tbody');
8 楼 bencode 2009-09-15  
这个应该在web编程里发的：）
7 楼 yuantong 2009-09-14  
Jwind 写道
要明白jquery也是对javascript的封装。

说明他封装的好嘛
6 楼 Jwind 2009-09-13  
要明白jquery也是对javascript的封装。
5 楼 kjj 2009-09-09  
还是jquery最好！！！
4 楼 andongoop 2009-09-09  
我又试了一下再IE中果然跑不了，我使用firefox做的测试。
浏览器之间的差异还很大，要写出兼容性很高的代码还要考虑很多内容，这是不是警示我们要用一些前端的js框架，比如jQuery等，这些框架已经解决了浏览器之间兼容性的问题。
3 楼 antiwise 2009-09-08  
IE下跑不了
2 楼 andongoop 2009-09-08  
刚才试了一下，JQUERY果然厉害。
1 楼 Foxswily 2009-09-08  
用jQuery一句话搞定的代码
$("#atable").append("<tr><td>新行</td></tr>");
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    android动态添加表格行_动态布局.zip

    在Android开发中，动态添加表格行是一个常见的需求，特别是在创建数据列表或者展示可变数据时。这个主题主要涉及Android的布局管理和控件操作。本文将深入探讨如何在Android应用中实现这一功能，主要包括以下几个...

    动态新增表格一行HTML页面源代码

    动态新增表格一行HTML页面源代码，用js实现的。

    android动态添加表格行

    在Android开发中，动态添加表格行是一个常见的需求，特别是在创建数据展示或者用户输入表单时。这个场景通常涉及到`TableLayout`布局，它是Android提供的一个用于构建网格样式的视图容器。下面我们将深入探讨如何在...

    JavaScript动态添加删除表格行

    1. **添加表格行**： 要动态添加一行，首先需要获取到表格的引用，通常是通过`document.getElementById`或`document.querySelector`来实现。然后，创建一个新的`&lt;tr&gt;`元素，并为它添加需要的`&lt;td&gt;`子元素。最后，...

    javascript动态添加表格数据行

    在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...

    动态添加Table表格

    本示例将详细介绍如何在ASP.NET后台使用C#语言来实现动态添加表格的功能。 首先，我们需要了解动态创建表格的基本步骤： 1. **创建表格对象**：在C#代码中，使用`new`关键字创建一个`HtmlTable`对象，这是ASP.NET...

    android动态添加表格行.zip

    在“android动态添加表格行.zip”中，我们可以找到一个名为`TableLayoutDemo`的示例项目，它展示了如何实现这个功能。 首先，我们需要理解`TableLayout`的基本用法。`TableLayout`是一个垂直布局容器，可以包含多个...

    表格动态插入行

    这将在表格的末尾添加一行，包含"数据1"和"数据2"。 为了使用户能够交互式地添加行，我们可能需要将此功能与按钮事件关联起来。例如，我们可以添加一个按钮，并在其点击事件中调用`addRow`： ```html (['新数据1',...

    安卓Android源码——动态添加表格行.zip

    在安卓（Android）开发中，动态添加表格行是一项常见的任务，尤其在构建数据展示或用户交互界面时。本文将深入探讨如何使用Android源码来实现这一功能，主要围绕`TableLayout`组件进行讲解。 `TableLayout`是...

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

    ` 每添加完一行后，计数器`count`递增，以便为新行的输入框设置唯一的name属性值。 - `function del(btn)` 函数用于删除用户点击的行。 - `var tr = btn.parentElement.parentElement;` 获取被删除按钮所在的行。 ...

    JavaScript实现动态添加表格中的行

    以下是一个简单的JavaScript函数，用于在表格中动态添加一行： ```javascript function addTableRow(name, age, city) { // 创建新行 var newRow = document.createElement('tr'); // 创建每个单元格并添加内容...

    Android应用源码之android动态添加表格行-IT计算机-毕业设计.zip

    在Android应用开发中，动态添加表格行是一种常见的需求，特别是在数据展示或者用户交互场景下。这个"Android应用源码之android动态添加表格行"的压缩包文件提供了相关的示例代码，对于正在做毕业设计或者想要深入...

    JQuery_可拖曳动态添加表格、动态排序

    JQuery 可拖曳动态添加表格、动态排序 ...我们使用了 JQuery 的 sortable 插件来实现可拖曳动态添加表格，然后使用 JQuery 的 append 方法来实现动态添加表格行的功能。这个功能可以帮助用户更方便地管理表格中的数据。

    jQuery 动态添加或删除表格行

    要动态添加表格行，我们通常会在用户触发某个事件（如点击按钮）时执行相关操作。以下是一个基本的示例： ```html 添加行 初始数据 ``` ```javascript $(document).ready(function() { var rowNum = 1; ...

    动态添加/删除表格行并提交内容到后台

    在动态添加表格行的场景中，JavaScript可以监听用户的操作，如点击按钮，然后在HTML表格中插入或移除行。以下是一个简单的示例： ```html 内容 &lt;td&gt;&lt;button onclick="addRow()"&gt;添加&lt;/button&gt;&lt;/td&gt; &lt;td&gt;...

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

    每一行可以包含多个`&lt;td&gt;`（单元格）或`&lt;th&gt;`（表头单元格）。在本例中，表格中可能还包含用于添加和删除行的按钮。 2. **jQuery选择器**：jQuery通过选择器来选取HTML元素，如`$("#id")`选择ID为特定值的元素，`$...

    .net表格动态添加行

    在.NET开发环境中，动态添加行是一项常见的需求，特别是在构建数据展示或者用户交互界面时。...配合图片资源“表格动态添加行.png”，可以更直观地理解这一过程。在实际项目中，可以根据具体需求调整和扩展这些方法。

    table动态添加行并编辑

    JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`&lt;table&gt;`元素用于创建表格，但...

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

    本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能，这在许多网页应用中是非常常见的需求。 首先，让我们理解基本概念。在HTML中，表格由`&lt;table&gt;`元素定义，每行由`&lt;tr&gt;`元素表示，而单元格则由`&lt;td&gt;`...

    动态 添加 表格 table

    动 态 添 加 表 格 动态添加表格 动态添加表格 动态添加表格

Magicbox
Global site tag (gtag.js) - Google Analytics