<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数据文档,动态生成列数不固定的表格并填充数据。
主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下
然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...
它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第x列”,表示单元格在表格中的行数和列数。 代码如下:<ht
JavaScript动态操作表格,添加,删除行、列及单元格
实现页面创建表格,和删除指定列、行单元格功能。利用JavaScript动态创建表格,可根据用户的使用需求动态添加指定列数、行数,删除指定列数、行数。删除成功或不成功时,会反馈给用户一个弹框提示,增强用户体验感。
主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下 功能描述 在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格。如下图所示: 分析 HTML界面设计 <body> 行...
//创建八列 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常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
16.3.html 使用JavaScript获取指定文件并列出其内容。 16.4.html 在JavaScript中使用FileSystemObject操作本地文件的方法。 第18章(\c18) 示例描述:学习XMLHttpRequest对象。 18.1.html 使用Ajax...
7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 ...
本练习旨在基于动态创建表。 数据是外星生物目击者报告的集合。 数据集太大,无法手动搜索,因此,用户必须具有过滤表数据中特定值的能力。 必须仅使用JavaScript,HTML,CSS和D3.js完成整个练习。 级别1:自动表格...
飞碟瞄准该项目旨在建立一个网站,该网站根据提供的UFO数据集动态创建表格。 它允许用户过滤表数据中的特定值。 它在网页上使用纯JavaScript,HTML和CSS,以及D3.js。 将基本HTML网页显示为登录页面。 使用以...