JavaScript动态创建表单与表格-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20052/article/details/81615616


<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>

动态创建FORM和表格