<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>
分享到：
相关推荐
//创建一行 for(var i=0;i;i++){ var _tr=_table.insertRow(i); //创建八列 for(var j=0;j;j++){ var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString...
标题中的“冻结table的行和列”主要涉及的是在Web开发或者电子表格软件中，如何设计和实现这一功能。在网页上，我们通常使用HTML、CSS以及JavaScript来构建交互式的表格。当用户滚动表格时，通过JavaScript监听滚动...
- **列判断**：内层循环遍历每一行中的所有单元格 (`table.rows[i].cells.length`)，并判断是否需要对当前列执行合并操作（示例中仅对前四列执行合并操作）。 - **合并逻辑**：如果发现相邻两行的单元格内容相同，则...
在IT领域，尤其是在网页开发和数据可视化中，动态改变表格的行和列是一项常见的需求。表格作为一种高效的数据展示工具，能够清晰地呈现结构化的信息。本文将深入探讨如何实现这一功能，主要关注JavaScript和HTML5中...
这个例子中，我们使用了CSS Grid将表格分为两部分，左侧固定列和右侧可滚动列。`position: sticky`属性使表头在滚动时保持在视口顶部，`left: 0`确保它固定在左侧。 对于更复杂的情况，例如，当表格有交错的表头...
"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个简单的`HTML`表格由`<table>`标签开始，内部包含`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`...
这个场景下，我们关注的是如何获取第一行第二列的数据。在HTML中，table由`<table>`标签定义，每一行由`<tr>`标签表示，而每一列则由`<td>`（表格数据）或`<th>`（表头数据）标签表示。在JavaScript中，我们可以使用...
在这个场景中，jQuery库将帮助我们更方便地获取和操作DOM元素，实现所需的滚动功能。 在`Index.js` 文件中，我们可以找到用于实现固定列滚动的核心代码。这部分代码可能包括以下步骤： 1. **选择目标列**：首先，...
"点击table任意列选中当前行demo"是一个典型的Web应用功能，它涉及到表格（Table）控件的自定义和事件处理，通常用于数据展示和操作。这个示例可能是为了实现用户在表格中通过点击某一列来选中整个行，以便进行...
使用javascript实现table动态增加删除行列。
JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们将深入探讨这些知识点。 ### 1. 动态添加行 在HTML中，`<table>`元素用于创建表格，但...
标题 "给 Table 增加行的 JavaScript 函数" 暗示了我们要讨论的是如何在 HTML 表格（Table）中动态添加行的方法，这是一个常见的前端开发任务，尤其是在构建数据展示或者用户交互的网页应用时。JavaScript 作为...
在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具...
为了在项目中使用这个优化过的插件，你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS文件，然后通过设置特定的参数和方法来启用和配置冻结列、排序、列宽和合并行功能。在开发过程中，可以利用浏览器...
下面是一个简单的示例，展示如何在 JavaScript 中配置 Bootstrap Table 来启用冻结列： ```javascript $(function () { $('#table').bootstrapTable({ columns: [ // 定义表格列 { field: 'id', title: 'ID' },...
这个"bootstrap-table-冻结列样例"是关于如何在Bootstrap Table中实现列冻结功能的一个实例。在网页设计中，特别是处理大数据表格时，冻结列是一项实用的功能，它允许用户在滚动表格时始终保持某些列（通常是标题或...
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...
javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩 javascript增加和删除table行及验证和遮罩
在JavaScript编程中，表格（table）是网页布局和数据展示常用的一种元素。有时我们需要获取用户在表格中选中或点击的行号和列号，以便进行相应的操作或处理。这篇博客将详细介绍如何实现这一功能。 首先，让我们...
在这个示例中，最后一列的`type: 'checkbox'`使得每一行都有一个复选框。然而，为了实现单选功能，我们还需要额外的JavaScript代码来处理点击事件。可以监听`checkbox`事件，并在事件处理函数中取消其他已选中的复选...