<html>
<head>
<title>挑战javascript难度3</title>
<script language="javascript">
var cellCounts = 1;
function makeDynamicTable(){
var count = document.getElementById("addCounter").value;
if(count==0){
alert("请填写一个数字作为参数");
return false;
}
var tableRows = t1.rows.length;
var tr1 = t1.insertRow(tableRows);
for(var i = 0 ; i<count; i++){
var td1 = tr1.insertCell();
td1.innerHTML = '<input type="text" id="cell'+cellCounts+'" />';
if(i<count-1){
cellCounts++;
}
}
alert("请在输入框中填写要显示的符号");
/*type ： text radio select checkbox password button */
}
function dynamicView(){
var tr1 = t1.insertRow(1);
for(var i = 1 ; i<cellCounts+1; i++){
var cellValue = document.getElementById("cell"+i).value;
if(cellValue=='radio'){
var td1 = tr1.insertCell();
td1.innerHTML = '<input type="radio" />'
}else if(cellValue=='text' ||cellValue==''){
var td2 = tr1.insertCell();
td2.innerHTML = '<input type="text"/>';
}else if(cellValue=='select'){
var td3 = tr1.insertCell();
td3.innerHTML = '<select></select>';
}else if(cellValue=='checkbox'){
var td3 = tr1.insertCell();
td3.innerHTML = '<input type="checkbox"/>';
}else if(cellValue=='password'){
var td4 = tr1.insertCell();
td4.innerHTML = '<input type="password"/>';
}else if(cellValue=='textarea'){
var td5 = tr1.insertCell();
td5.innerHTML = '<input type="textarea"/>';
}else {
var td6 = tr1.insertCell();
td6.innerHTML = '<input type="text" style="background-color:red" value='+cellValue+'>';
}
}
}
</script>
</head>
<body>
<div align="center">
<br><br>
<font color="blue">动态制作表格挑战难度3</font>
<br><br>
<form id="f1" >
<table id="t1">
<input type="text" name="addCounter" id = "addCounter"/>
<input type="button" value="添 加" onClick="makeDynamicTable()"/>
<input type="button" value="提 交" onclick="dynamicView()"/>
</table>
</form>
</div>
</body>
</html>
分享到：
相关推荐
js 实现 JavaScript遍历table的行和列! 值得下载看看!资源免费,大家分享!!
标题中的“冻结table的行和列”主要涉及的是在Web开发或者电子表格软件中，如何设计和实现这一功能。在网页上，我们通常使用HTML、CSS以及JavaScript来构建交互式的表格。当用户滚动表格时，通过JavaScript监听滚动...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
在上面的代码中，我们使用了一个 JavaScript 函数 `ColumnState` 来控制 TABLE 的显示和隐藏。该函数接收一个 Checkbox 对象作为参数，然后根据 Checkbox 的状态来显示或隐藏相应的列。 知识点 5：使用 EVENT 事件...
- **列判断**：内层循环遍历每一行中的所有单元格 (`table.rows[i].cells.length`)，并判断是否需要对当前列执行合并操作（示例中仅对前四列执行合并操作）。 - **合并逻辑**：如果发现相邻两行的单元格内容相同，则...
这个例子中，我们使用了CSS Grid将表格分为两部分，左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部，`left: 0`确保它固定在左侧。 对于更复杂的情况，例如，当表格有交错的表头...
在IT领域，尤其是在网页开发和数据可视化中，动态改变表格的行和列是一项常见的需求。表格作为一种高效的数据展示工具，能够清晰地呈现结构化的信息。本文将深入探讨如何实现这一功能，主要关注JavaScript和HTML5中...
首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也会始终保持可见，以便用户始终能看到关键信息。例如，表头通常会被冻结，以便用户在查看大量数据时能快速识别列内容。 在给定的...
为了在项目中使用这个优化过的插件，你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS文件，然后通过设置特定的参数和方法来启用和配置冻结列、排序、列宽和合并行功能。在开发过程中，可以利用浏览器...
标题 "给 Table 增加行的 JavaScript 函数" 暗示了我们要讨论的是如何在 HTML 表格（Table）中动态添加行的方法，这是一个常见的前端开发任务，尤其是在构建数据展示或者用户交互的网页应用时。JavaScript 作为...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
从提供的文件内容中，我们可以提取以下关于jQuery获取表格中某一行某一列值的知识点： 1. jQuery选择器的使用：在文中，通过使用选择器 $(".div") 找到了包含多个表格的div元素。这说明了jQuery选择器用于选取页面...
在这个场景中，jQuery库将帮助我们更方便地获取和操作DOM元素，实现所需的滚动功能。 在`Index.js` 文件中，我们可以找到用于实现固定列滚动的核心代码。这部分代码可能包括以下步骤： 1. **选择目标列**：首先，...
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
下面是一个简单的示例，展示如何在 JavaScript 中配置 Bootstrap Table 来启用冻结列： ```javascript $(function () { $('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' },...
这个"bootstrap-table-冻结列样例"是关于如何在Bootstrap Table中实现列冻结功能的一个实例。在网页设计中，特别是处理大数据表格时，冻结列是一项实用的功能，它允许用户在滚动表格时始终保持某些列（通常是标题或...
在实际应用中，我们通常需要编写逻辑代码来动态计算哪些行应该被合并，以及合并后的行数。 ### 代码解读与分析 #### 代码片段解析 给定的代码片段展示了如何在ASP.NET中实现表格行的合并。代码中的`GroupRows`...
javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩
这个主题主要关注如何通过JavaScript技术使表格中的特定行在用户滚动页面时始终保持可见，这种效果通常被称为"固定表头"或"固定列"。这种功能可以提升用户体验，特别是在处理大量数据时，保持关键列或行的可见性非常...
"实现Table表头和列固定"的目标就是解决这一问题，保持表头在滚动时始终显示，同时支持多表头和多列固定，确保布局清晰，无错位。 首先，我们需要理解HTML中的`<table>`元素是用于创建表格的基本结构。它由`<thead>...