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

JavaScript动态创建表格列

阅读更多
<script>
var pattern =/\.jpg/i;
var src = '';
var vLink = document.getElementsByName("link");
var imageSrc = document.getElementsByName("imageSrc");
var len = vLink.length;
var tr = document.getElementById('image');//image为行ID
var url = '';
//创建表格列
for(i=0; i<len; i++){
    url = vLink[i].value;
    src = imageSrc[i].value;
    src = src.substring(0, src.match(pattern).index);
    src = '../images/' + src + '.jpg';
    var td = tr.insertCell(i);
    td.setAttribute("width", "135");
    tdHtml = '<table border=0 width=130 cellpadding=0 cellspacing=0>';
    tdHtml += '<tr><td><a href="';
    tdHtml = tdHtml + url + '">';
    tdHtml += '<img width=130 height=89 src="';
    tdHtml = tdHtml + src+ '"/></a>';
    tdHtml += '</td></tr></table>';
    td.innerHTML = tdHtml;
    //以上为IE所支持
    //其他浏览器中支持
    /*
    var table = document.createElement("table");
    table.setAttribute("width", "130");
    table.setAttribute("cellpadding", "0");
    table.setAttribute("cellspacing", "0");
    var childTr = document.createElement("tr");
    var childTd = document.createElement("td");
    var href = document.createElement("a");
    href.setAttribute("href", url);
    var image = document.createElement("img");
    image.setAttribute("src", content);
    image.setAttribute("width", "130");
    image.setAttribute("height", "89");
    href.appendChild(image);
    childTd.appendChild(href);
    childTr.appendChild(childTd);
    table.appendChild(childTr);
    td.appendChild(table);
    tr.appendChild(td);
    */
}
</script>
分享到:
评论

相关推荐

    js读取json数据动态生成列数不固定的表格

    js读取本地json数据文档,动态生成列数不固定的表格并填充数据。

    Javascript动态创建表格及删除行列的方法

    主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下

    JavaScript动态生成表格案例

    然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...

    JavaScript与DOM组合动态创建表格实例

    它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第x列”,表示单元格在表格中的行数和列数。 代码如下:&lt;ht

    js动态操作表格

    JavaScript动态操作表格,添加,删除行、列及单元格

    JS实现页面创建表格.rar

    实现页面创建表格,和删除指定列、行单元格功能。利用JavaScript动态创建表格,可根据用户的使用需求动态添加指定列数、行数,删除指定列数、行数。删除成功或不成功时,会反馈给用户一个弹框提示,增强用户体验感。

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

    主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下

    JavaScript实现动态生成表格

    本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下 功能描述 在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示: 分析 HTML界面设计 &lt;body&gt; 行...

    JavaScript table 动态添加行,列

    //创建八列 for(var j=0;j;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement("input"); t.size=20; _td...

    原创-javascript服务器交互型可编辑表格和我的js常用库

    * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....

    程序天下:JavaScript实例自学手册

    9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...

    JavaScript完全自学宝典 源代码

    16.3.html 使用JavaScript获取指定文件并列出其内容。 16.4.html 在JavaScript中使用FileSystemObject操作本地文件的方法。 第18章(\c18) 示例描述:学习XMLHttpRequest对象。 18.1.html 使用Ajax...

    JavaScript网页特效范例宝典源码

    7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 ...

    javascript-challenge

    本练习旨在基于动态创建表。 数据是外星生物目击者报告的集合。 数据集太大,无法手动搜索,因此,用户必须具有过滤表数据中特定值的能力。 必须仅使用JavaScript,HTML,CSS和D3.js完成整个练习。 级别1:自动表格...

    JavaScript

    飞碟瞄准该项目旨在建立一个网站,该网站根据提供的UFO数据集动态创建表格。 它允许用户过滤表数据中的特定值。 它在网页上使用纯JavaScript,HTML和CSS,以及D3.js。 将基本HTML网页显示为登录页面。 使用以...

Global site tag (gtag.js) - Google Analytics