<script>
//helper function to create the form
function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.method = "POST";
return submitForm;
}
//helper function to add elements to the form
function createNewFormElement(inputForm, elementName, elementValue){
var newElement = document.createElement("<input name='"+elementName+"' type='hidden'>");
inputForm.appendChild(newElement);
newElement.value = elementValue;
return newElement;
}
//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
createNewFormElement(submitForm, "field1", "somevalue");
createNewFormElement(submitForm, "field2", "somevalue");
submitForm.action= "someURL";
submitForm.submit();
}
</script>
<input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()">
动态创建表格
<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
function start() {
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
// creating all cells
for(var j = 0; j < 2; j++) {
// creates a <tr> element
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// creates a <td> element
mycurrent_cell = document.createElement("td");
// creates a text node
currenttext = document.createTextNode("cell is row "+j+", column "+i);
// appends the text node we created into the cell <td>
mycurrent_cell.appendChild(currenttext);
// appends the cell <td> into the row <tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row <tr> into <tbody>
mytablebody.appendChild(mycurrent_row);
}
// appends <tbody> into <table>
mytable.appendChild(mytablebody);
// appends <table> into <body>
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border", "2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
分享到：
相关推荐
首先，我们了解了动态创建表单的核心概念。在实际开发中，根据不同的业务需求，表单的内容和类型可能会有所变化。为了提高灵活性和重用性，我们可以编写通用的表单组件，并使用Vue的指令v-if来根据条件渲染不同的...
为了更进一步理解动态创建表格的灵活性，下面提供了一个额外的示例，展示了如何在表格中动态添加下拉列表和文本输入框： ```javascript function addRow_1() { if (_table_1.rows.length ) { var _tr = _table_1....
layui的表单组件支持多种表单元素和验证规则，可以方便地创建和定制表单样式。 三、动态生成表单 1. 引入依赖：首先，在HTML文件中引入jQuery和layui的CDN链接，确保它们在页面加载时可用。 ```html ...
### PB动态创建数据窗口知识点详解 #### 一、概述 在使用PowerBuilder开发应用程序时，开发者经常需要根据用户的特定需求动态地创建数据窗口。本文档将深入探讨如何通过PowerBuilder的`SyntaxFromSQL()`函数来实现...
为了实现表格的动态加载和滚动优化，FormTable可能会利用UITableView的Cell复用机制，确保在滚动时只加载可视区域的单元格，从而提升性能。同时，项目可能还实现了下拉刷新和上拉加载更多功能，以适应常见的数据流...
总结来说，基于Element UI的Form表单，结合Vue.js的组件化思想和动态渲染能力，我们可以构建出一个高拓展性的表格布局组件。这个组件不仅可以满足日常表单布局的需求，还能灵活适应各种复杂的业务场景，降低开发难度...
在VB（Visual Basic）编程中，动态创建控件是一项实用技术，它允许程序在运行时根据需要创建和添加用户界面元素。"Example026-动态创建控件.rar" 文件很可能是包含一个VB示例项目，展示了如何在不预先定义的情况下...
itextsharp文件外加在网上下的一个制作表格的案例 第一部分 iText的简单应用 第一章 创建一个Document 第一步 创建一个Document实例： 第二步 创建Writer实例 第三步 打开Document ...第十二章 页面和表格事件
数据模块（Data Module）在Delphi中是一个特殊的窗体（Form），主要用来组织和管理数据库连接、查询、表格和其他与数据处理相关的组件。静态创建数据模块是在设计时通过拖放组件到数据模块上完成的，而动态创建则是...
首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、项目描述、开始日期和完成日期。此外，还有一行隐藏的模板行，用于动态添加新记录。表单中还有一个“Add”按钮...
在给定的文件中，标题“用js创建form表单并提交”涉及到使用JavaScript来创建和处理HTML表单（form）的过程。下面将详细介绍这个过程。 1. **创建HTML表单**： HTML表单是用户与网页进行交互的重要元素，通常通过`...
本文将深入探讨如何在视图窗口中动态创建ActiveX控件FlexGrid，这是一种强大的表格控件，常用于展示数据并进行编辑。 首先，让我们了解什么是ActiveX控件。ActiveX是微软开发的一种组件技术，它允许开发者创建可...
动态创建控件的主要优势在于它能够使程序更具可扩展性和适应性。例如，在一个数据量可变的表格应用中，用户可能希望在加载数据时自动创建与数据行数相匹配的行。或者在设计一个设置面板时，根据用户的配置选项自动...
通过这些数据，我们可以动态地创建和组织MenuStrip中的菜单项。 以下是一些关键步骤来实现这个功能： 1. **创建DataTable**：首先，你需要创建一个DataTable，并填充菜单结构的相关数据。这可以通过数据库查询或者...
根据给定的信息，本文将详细解释“Ext 添加功能form表单实例”的知识点，这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
在AngularJS 2（现在称为Angular）中，表单和表格是构建动态用户界面的关键元素。Angular提供了强大的数据绑定和表单验证功能，使得开发者能够高效地处理用户输入和展示数据。下面我们将深入探讨AngularJS 2中表单和...
通过使用"Form表单js设计器生成器"，开发者可以快速创建符合Bootstrap设计规范的高质量表单，降低手动编写HTML和JavaScript的复杂度，提高开发效率。同时，这种可视化设计方式使得非编程背景的设计师也能参与到表单...