用javascript动态创建并提交表单form，表格table

时间：2010-10-09 来源：xue2

通过在html触发动作，提交一个表单。代码如下：

<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>
---------------------------------------------------------------------------- js form action动态修改方法
一般比较简单的就是
document.formName.action="/dddd.do?ddd="+str
document.formName.submit(); 写成函数式的调用就是
复制代码代码如下:
<script language="JavaScript" >
function checkaction(v){
if(v==0){
document.dbform.action="index.php?admin_db-repair";
}else{
document.dbform.action="index.php?admin_db-optimize";
}
dbform.submit();
}
</script>
<form action="" method="post" name="dbform">
<input type="submit" class="btn" value="{lang dbStartOptimize}" name="opsubmit" onclick="checkaction(1);" />
<input type="submit" class="btn" value="{lang dbStartFix}" name="resubmit" onclick="checkaction(0);" />
</form>