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

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

    博客分类:
  • JS
阅读更多
<!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>
分享到:
评论

相关推荐

    浮点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;`...

Global site tag (gtag.js) - Google Analytics