`
codsoul
  • 浏览: 212399 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

JavaScript实现在第N个<tr>标签上添加父标签

    博客分类：
  • JS
javascript 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ssssssss</title>
<script type="text/javascript">
function wrap(id, tag, index, wrapperTag) {
    var obj = document.getElementById(id);
    var targetObj = obj.getElementsByTagName(tag)[index];    //待操作的目标对象
    var cloneObj = targetObj.cloneNode(true); //克隆一遍
    var wrapper = document.createElement(wrapperTag); //创建指定的父标签
    wrapper.appendChild(cloneObj); //把克隆得来的对象插入wrapper节点
    obj.insertBefore(wrapper, targetObj); //把wrapper节点添加到目标对象前面
    obj.removeChild(targetObj); //删除目标节点
}

window.onload = function() {
    wrap('demo', 'p', 1, 'div');  //成功
    //wrap('tab1', 'tr', 0, 'thead');  //失败
    alert(document.getElementById("demo").innerHTML);
}
</script>
</head>

<body>
    <table id="tab1" border="1">
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>A1</td>
            <td>B1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
        </tr>
    </table>
   
    <div id="demo">
        <p>one</p>
        <p>two</p>
        <p>three</p>
    </div>
</body>
</html>
分享到：
| JavaBean简略介绍
评论
发表评论

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

相关推荐

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    " onclick="addtag('操作系统报告')"&gt;操作系统报告&lt;/a&gt;(1) &lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0);" onclick="addtag('操作系统')"&gt;操作系统&lt;/a&gt;(1) &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- rule of upload --&gt; ...

    网页设计考试题PHP.docx

    7. 段落标签是&lt;p&gt;，预设格式标签是&lt;pre&gt;，表格标签&lt;table&gt;，声明表格开始的标签&lt;tr&gt;，声明表单&lt;form&gt;，框架集&lt;frameset&gt;，单个框架[frame]，内联框架&lt;iframe&gt;，加粗文本标签&lt;strong&gt;，倾斜文本标签&lt;em&gt;，文字属性...

    用CSS控制表格的交替颜色.rar

    一个简单的表格通常由`&lt;table&gt;`标签开始，然后是`&lt;tr&gt;`（表格行）标签，每个`&lt;tr&gt;`标签内包含`&lt;th&gt;`（表头单元格）或`&lt;td&gt;`（表格数据单元格）。例如： ```html &lt;table&gt; &lt;tr&gt; &lt;th&gt;表头1&lt;/th&gt; &lt;th&gt;表头2&lt;/th&gt; &lt;/...

    html语言语法说明

    当浏览器遇到`&lt;P&gt;`标签时，会在内容中创建一个新的段落，段落间默认会有一行间距。 3. **横线**： `&lt;HR&gt;`标签用于插入一条水平线，常用于分隔网页内容。 4. **换行**： `&lt;BR&gt;`是一个单标签，用于强制文本换行，...

    HTML静态网页代码设计与基本语法

    --&gt;`用于添加注释，不显示在网页上。 3. 字体和字号： - `face`属性指定字体，如`&lt;font face='楷体_GB2312' size='N'&gt;`。 - `size`属性调整字号，`+N`和`-N`表示相对调整。 - `b`、`i`和`u`标签分别表示粗体、...

    漂亮的html 表格排序实现

    HTML表格由`&lt;table&gt;`标签定义，`&lt;tr&gt;`用于创建行，`&lt;th&gt;`定义表头单元格，而`&lt;td&gt;`则用于定义数据单元格。例如： ```html &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年龄&lt;/th&gt; &lt;th&gt;城市&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; ...

    web基础知识

    \n- `&lt;table&gt;`元素用于创建表格，结合`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）和`&lt;th&gt;`（表头）来组织数据。\n\n2.4 HTML表单和交互\nHTML表单（`&lt;form&gt;`）允许用户输入数据，常见的表单元素包括`&lt;input&gt;`（文本框、复选框、...

    HTML教程总结

    2. **图片上加连接/图象的边框**：可以在`&lt;img&gt;`标签中加入`href`属性创建图片链接，使用`border`属性添加边框。 #### 五、表单的使用 1. **表单的基本语法**：使用`&lt;form&gt;`标签创建表单。 2. **文字输入和密码...

    PHP和Javascript的实用代码段收藏

    echo "&lt;tr&gt;&lt;th&gt;日&lt;/th&gt;&lt;th&gt;一&lt;/th&gt;&lt;th&gt;二&lt;/th&gt;&lt;th&gt;三&lt;/th&gt;&lt;th&gt;四&lt;/th&gt;&lt;th&gt;五&lt;/th&gt;&lt;th&gt;六&lt;/th&gt;&lt;/tr&gt;"; for ($i = 0; $i &lt; $firstDayOfWeek; $i++) { echo "&lt;td&gt;&nbsp;&lt;/td&gt;"; } $daysInMonth = date('t', ...

    Java Web应用开发教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集.ppt

    - HTML还提供了丰富的标签，如标题`&lt;h1&gt;`到`&lt;h6&gt;`、字体样式标签`&lt;font&gt;`、`&lt;b&gt;`、`&lt;i&gt;`、`&lt;u&gt;`、`&lt;sup&gt;`和`&lt;sub&gt;`，列表`&lt;ul&gt;`和`&lt;ol&gt;`，段落`&lt;p&gt;`，换行`&lt;br&gt;`，分区`&lt;div&gt;`，图像`&lt;img&gt;`和链接`&lt;a&gt;`。 2.1 HTML...

    js实现网页计算器

    每一行和列通过`&lt;tr&gt;`和`&lt;td&gt;`标签定义，而输入框则通过`&lt;input type="text"&gt;`实现。 ### 2. CSS样式美化 为了使计算器看起来更美观，CSS被广泛应用于样式设计。在这个例子中，我们可以看到对文本大小、边框、背景...

    javascript 操作Word和Excel的实现代码.docx

    虽然题目中没有具体提到如何使用JavaScript操作Excel文档，但在实际应用中，通常可以通过Microsoft Office提供的OLE自动化或者第三方库如`SheetJS`来实现。这里提供一个简单的示例，展示如何使用`SheetJS`库将JSON...

    html大作业.zip

    5. **表格元素**：`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头）、`&lt;td&gt;`（单元格）等，用于创建数据表格。 在CSS部分，学习者会学习如何： 1. **选择器**：通过类选择器 `.class`、ID选择器 `#id` 和元素选择器 `...

    在学期间html前端知识总结

    5. `nth-of-type()`选择器：选择父元素的第n个特定类型的子元素。 三、表格标签 HTML表格是数据展示的重要工具，主要标签包括： 1. `&lt;table&gt;`：定义表格。 2. `&lt;tr&gt;`：定义表格行。 3. `&lt;th&gt;`：定义表头单元格。 4....

    luyenTapVongLap1

    表格（&lt;table&gt;）用于数据展示，包括表头（&lt;thead&gt;）、主体（&lt;tbody&gt;）、列组（&lt;colgroup&gt;）、行（&lt;tr&gt;）、单元格（&lt;th&gt;和&lt;td&gt;）。可以使用&lt;caption&gt;添加表格标题，&lt;col&gt;定义列样式。\n\n五、超链接和图像\n\n&lt;a&gt;标签...

    自定义通用增修删标签

    buttonHTML.append("&lt;td&gt;&lt;button onclick=\"").append(add).append("\" ACCESSKEY=\"N\" title=\"增加\"&gt;&lt;img border=\"0\" src=\"../image/button/new.png\" align=\"absbottom\" /&gt;增加 (&lt;SPAN style=\"text-...

    IE中关于使用innerHTML加入HTML代码的问题

    根据Microsoft的官方文档，innerHTML属性在特定元素上是只读的，其中包括`&lt;col&gt;`, `&lt;colgroup&gt;`, `&lt;frameset&gt;`, `&lt;html&gt;`, `&lt;head&gt;`, `&lt;style&gt;`, `&lt;table&gt;`, `&lt;tbody&gt;`, `&lt;tfoot&gt;`, `&lt;thead&gt;`, `&lt;title&gt;`, 和 `&lt;tr&gt;`...

    jquery与json和ajax的结合

    此模板中包含了多个`&lt;th&gt;`和`&lt;td&gt;`标签，分别对应不同的数据字段。模板中的每一个`&lt;td&gt;`标签都有一个特定的`id`属性，以便后续通过jQuery进行数据绑定。 ##### 3.2 使用jQuery发起AJAX请求 接下来，我们将使用...

    用JQuery实现table按列分组（简单常用

    var $groupRow = $('&lt;tr&gt;&lt;th colspan="N"&gt;Group: ' + key + '&lt;/th&gt;&lt;/tr&gt;'); // N为列数 $table.append($groupRow); $.each(value, function() { $table.append(this); }); }); ``` 以上代码会在每个分组前添加...

    实现超用户体验 table排序javascript实现代码

    - **ID与this.id的区别**：在实现过程中，作者提到使用`this.id`的方式获取`&lt;tr&gt;`的ID。这里需要指出的是，实际上`this.id`指的是触发事件元素的ID，而不是`&lt;tr&gt;`的ID。因此，为了解决这个问题，作者采用了在`&lt;tr&gt;`...

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