`

动态添加表格行时的style的设置

 
阅读更多
以前看到别人的帖子说在动态设置cell风格时遇到问题,最近
自己也遇到同样的问题,就是在向table中insertCell()时,
无法给它的style属性设置一些类似于boder-bottom之类的风格。

在网上也查了很多种解决办法,比如下面的几种方式:

var   newRow   =   [TableObject].insertRow(i);
var   newCell   =   newRow.insertCell();

1.   newCell.style[ "boder-bottom "]   =   "1px   solid   silver ";

2.   newCell.setAttribute( "style ",   "1px   solid   silver ");

3.   newCell.style.boder-Bottom   =   "1px   solid   silver ";

这几种方法经过测试,都不能用,最后一种甚至是语法错误。

后来发现,对于这种中间带“-”的style属性,如果用
newCell.style.boderBottom   =   "1px   solid   silver ";
这样的方法,就可以解决不能设置的问题,也就是单纯地把
小横线“-”去掉就可以了。

用同样的方法,就可以给 "font-size ",   "background-color ",  
"text-align "等等类似的属性动态赋值了。

另外,对于一个newCell要设置许多属性的话,可以用
with   (newCell.style)   {
fontSize   =   "9pt ";
borderBottom   =   "1px   solid   silver ";
}
这样的方法来设置,减少代码字数。
分享到:
评论

相关推荐

    javascript动态添加表格数据行

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

    小程序源码 动态添加表格行.rar

    在小程序开发中,动态添加表格行是一项常见的需求,特别是在数据展示和用户交互中。这个"小程序源码 动态添加表格行.rar"压缩包提供的TableLayoutDemo示例,旨在帮助开发者掌握这一技能。下面我们将详细探讨相关的...

    jquery动态控制表格的行

    通过创建新的DOM元素、添加事件监听器和应用CSS样式,我们可以轻松地实现动态增加、选中和删除表格行。这对于构建交互式Web应用,尤其是在处理表格数据时,是非常实用的工具。在实际项目中,你可以根据需要进一步...

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中,表格是一个非常重要的元素,用于展示数据。为了使网页更具交互性,我们常常需要动态地对表格进行操作,比如插入或删除行等。本文将通过一个具体的示例来讲解...

    js生成动态表格并为每个单元格添加单击事件的方法

    在提供的代码片段中,使用了`getElementById`方法来获取页面上的表格元素,然后通过`document.createElement`方法来动态创建`<tr>`(表格行)和`<td>`(表格单元格)。通过循环的方式为每一行和每一列创建相应的元素...

    javascript动态操作表格

    你可以通过设置单元格或行的`class`或`style`属性来改变其视觉表示,或者使用`checked`属性来模拟多选。例如,你可以这样选中一个单元格: ```javascript var cell = document.getElementById('myCell'); cell....

    Html动态添加行

    当用户点击此按钮时,会触发内部的回调函数,生成新的行数据(`newRow`)并将其添加到表格的tbody元素(通常存放表格的行)的末尾。 此外,`img`目录可能包含了用于美化页面的图像资源,如图标或其他装饰性图片。 ...

    javascript改变表格行的颜色

    例如,在表格行`<tr>`上添加`onmouseover`和`onmouseout`事件,可以实现在鼠标悬停时改变行的背景色: ```html <tr onMouseOver="this.style.backgroundColor='lightblue';" onMouseOut="this.style....

    JAVASCRIPT自动添加表格

    首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`<table>`元素定义,行(`<tr>`)、列(`<td>`或`<th>`)以及表头(`<thead>`)和表体(`<tbody>`)等组成。在JavaScript中,我们可以利用DOM(Document ...

    javascript如何动态加载表格与动态添加表格行

    JavaScript动态加载表格和动态添加表格行是Web开发中常见的需求,特别是当页面内容需要根据用户操作或者从服务器获取的数据动态变化时。下面将详细介绍使用JavaScript实现这些功能的技术知识点。 首先,动态加载...

    sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等

    在实际开发中,我们可能需要遍历数据并根据需要为每个单元格或行设置样式。这可以通过创建一个函数,接受数据和样式参数,然后生成对应的`ws`(工作表)和`wb`(工作簿)对象来完成。最后,使用`XLSX.writeFile`或`...

    js动态生成表格

    - `appendChild()`方法用于将元素添加到其父元素的末尾,如`table.appendChild(tr)`将行添加到表格。 - 若要在已有元素之前插入,可以使用`insertBefore(newChild, existingChild)`。 4. 表格样式: - 通过CSS,...

    HTML完美动态表格(可编辑)

    5. **动态添加行和删除行**: 这种功能通常通过JavaScript实现,例如,可以添加一个按钮,当点击时,触发一个函数来创建新的表格行,并将其插入到适当的位置。同样,删除行可能涉及选定行后点击删除按钮,触发一个...

    一个动态添加table行的js例子

    首先,我们来理解动态添加表格行的基本概念。 表格(Table)是HTML中用于组织数据的一种结构,通过`<table>`, `<tr>`, `<td>`等标签构建。在JavaScript中,我们可以操作DOM(Document Object Model)来对这些元素...

    js动态绘制表格,实现动态绘制,添加 和删除

    可以动态添加新行到表格中。示例代码如下: ```javascript var newRow = document.createElement('tr'); var newCell1 = document.createElement('td'); newCell1.innerHTML = '新增单元格1'; newRow.appendChild...

    自动增加行的动态表格

    标题“自动增加行的动态表格”揭示了这个项目的核心功能,即实现一个表格,当用户在其中输入数据或达到特定条件时,能够自动添加新的行。这种技术在数据输入、管理或者展示应用中非常常见,比如在线表单、数据库前端...

    JS动态添加tr

    JavaScript动态添加`<tr>`是实现动态表格的重要技巧,尤其在数据量变化或者用户交互时非常有用。结合DIV+CSS布局,我们可以创建出符合现代网页设计标准的、响应式的页面。熟练掌握这些技术,对于提升网页开发的效率...

    js动态操作表格

    在JavaScript编程中,动态操作表格是一项常见的需求,特别是在构建数据驱动的Web应用时。这个主题主要涵盖如何使用JavaScript来创建、修改以及删除HTML表格(`<table>`元素)中的行(`<tr>`)、列(`<td>`或`<th>`)...

    动态Javascript表格实例

    本教程将深入探讨如何使用JavaScript创建动态的表格实例,包括表格的动态增删行功能以及鼠标移动时单元格变色和奇偶行颜色变化的效果。 首先,让我们了解HTML中的表格基础。`<table>`元素用于定义一个表格,`<tr>`...

    Docxtemplater模板导出word,动态不确定列数的表格,表头加粗,且表格居中

    从标题和描述来看,我们将讨论如何使用Docxtemplater来处理动态的、不确定列数的表格,并设置表头加粗以及表格居中对齐。 首先,`Docxtemplater`允许我们创建一个`.docx`模板文件,其中包含静态内容,然后用...

Global site tag (gtag.js) - Google Analytics