<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>
分享到:
相关推荐
在JavaScript中动态创建表格是一项常见的任务,特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格,以及如何使用`deleteRow()`和`deleteCell()`...
我们可以利用`document.createElement()`、`.appendChild()`等方法动态创建这些元素。 4. **数据驱动视图**:根据JSON数据的结构,我们需要遍历数据,为每一项生成对应的表格行。如果列数不固定,我们需要在开始...
总的来说,JavaScript动态操作表格涉及创建、删除、选择和更新表格元素,这些都需要对DOM有深入理解。在实际应用中,还要考虑浏览器兼容性,特别是对于较旧的浏览器,如IE6和早期的Firefox版本。通过合理使用...
《jQuery动态创建表格生成器代码详解》 在Web开发中,动态生成表格是常见的需求,尤其是在数据展示和交互性较强的应用场景中。jQuery作为一个轻量级的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。本文...
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
JavaScript动态创建表格是一项基础且实用的Web开发技能,它允许开发者在客户端使用JavaScript编程语言根据需要动态生成表格元素。这在处理动态数据集、创建用户交互式界面以及动态修改网页结构时尤其有用。 在本文...
然后获取了表格元素及其 tbody 元素,通过 for 循环遍历数组中的每个学生,动态创建了表格的每一行和每个单元格,并将学生的信息填充到对应的单元格中。 最后,为每行的删除操作添加了点击事件处理程序。当用户单击...
1. **创建表格** 在HTML中,我们可以使用`<table>`、`<tr>`、`<td>`等标签创建一个基本的表格。然后通过JavaScript获取表格元素,例如使用`document.getElementById()`或`document.querySelector()`方法。 2. **...
在IT领域,动态创建表格标签是一项常见的编程任务,特别是在网页开发和用户界面设计中。这一技术使得开发者能够根据需要在运行时自动生成表格元素,如`<table>`、`<tr>`(表格行)、`<td>`(表格数据单元格)以及与...
在JavaScript中,动态创建表格和删除行列是常见的需求,尤其在网页交互和数据展示中。以下将详细讲解如何实现这些功能。 首先,我们来看如何动态创建表格。在HTML中,表格由`<table>`元素定义,包含`<tr>`(行)和`...
在这个场景中,我们关注的是如何使用 jQuery 动态创建表格,并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力,或者在数据展示时提供更直观的区分。 首先,我们需要理解 jQuery 如何...
要动态创建表格,我们可以使用jQuery的`append()`方法在页面上指定的元素后添加新的HTML代码。 1. **创建整个表格**: 假设我们有一个空的`div`元素用于放置表格,其ID为`tableContainer`。可以这样创建一个2行3列...
在1.3.1版本中,动态表格列的实现是一个常见的需求,这涉及到表格的灵活性和可扩展性,使用户可以根据不同的数据或者权限展示不同的列。 动态表格列的实现通常包括以下几个关键步骤: 1. **数据准备**:首先,你...
它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第x列”,表示单元格在表格中的行数和列数。 代码如下:<ht
本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一:最原始的方法,通过`createElement()`函数逐个创建元素。这种方法需要手动构建表格的结构,包括`<table>`、`<tbody>`、`<tr>`和`<td>`等元素。例如...
总结来说,这个"动态创建表格.zip"项目展示了如何使用JQuery和JavaScript来构建一个具有横向树形结构、分层显示和动态数据更新的表格。它涵盖了DOM操作、事件处理、数组操作、Ajax交互等多个核心概念,是学习和实践...
本文所探讨的方法主要涉及使用JavaScript动态创建表格,并为表格中的每一个单元格添加点击事件处理函数,实现点击单元格时能够弹出单元格内容并改变单元格背景颜色的效果。下面详细地对标题、描述和给出的部分内容...
6. 动态生成:通过JavaScript代码动态创建ColumnModel和Store,从而实现表格的动态生成。 通过理解和掌握这些知识点,开发者可以构建出高度灵活、响应式的前端表格应用,同时充分利用后端数据源提供动态内容。
在JavaScript中,我们可以利用DOM(Document Object Model)API动态创建这些元素。例如,要创建一个新的表格行,可以使用以下代码: ```javascript let table = document.getElementById('yourTableId'); let new...
例如,`document.getElementById()`、`document.createElement()`、`appendChild()`等方法用于动态创建和修改表格。 2. **事件监听**:JavaScript提供了多种事件监听机制,如`addEventListener()`,可以绑定点击、...