在表格中动态创建表格

使用一些代码来动态创建表格：http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm 在表格中动态创建表格

这很好用。不过，我有一个正常的HTML表格，我用html/php生成数据以获取数据。我想用表单替换数据，当用户单击编辑按钮时，原始条目被替换为表单（文本框或下拉菜单）。用户做出选择并且新的表格返回适当的编辑。

因此，例如数据的一部分有此表中：

<td><?php echo $result[0] ?></td>

使用链接要创建一个表单中动态我将其更改为：

<td id="paraID"><form id="form1" name="form1" method="post" action enctype="text/plain" alt=""><?php echo $result[0] ?></form></td>

还要注意的onclick事件的编辑按钮：

这是很难解释，但希望有人可以帮我这个互动。我需要一些方法来说：如果（用户点击编辑按钮）然后与形式的每个条目（例如替代HTML表，该表返回的名字叫foo和一个文本框会出现在它FOO，但现在他们可以编辑更改名称）。

来源

2011-10-24 Tom

每个机会，你不会使用jQuery或考虑使用它吗？它使得这样做更容易。 – ghbarratt

如果你能为TD的ID开始时那么它会使事情变得更容易。然后你需要一个编辑按钮。注意：这可能是不错的名称来代替“RESULT_0”为价值/场：

<td id="result_0_parent"><?php echo $result[0] ?><input type="button" onClick="editField('result_0','select')" value="Edit" /></td>

然后，在JavaScript，你将有EDITFIELD函数定义，因此它设置了TD的内容是动态形式。看着在本例中的javascript makeForm功能，你看到这种情况出现与appendChild(myform);功能editField会像makeForm功能，除非你将在FIELD_ID和field_type作为参数传递：

function editField(field_id, field_type)

我建议你换的行定义mypara定义mytd或更好，而不是field_parent因为在你的情况下，它不会是一个段落元素，但TD（或可能还有一些其它类型的元件）：

field_parent = document.getElementById(field_id+"_parent");

电子xample代码创建一个select（下拉列表），但我猜你想创建其他字段输入类型，所以我建议将field_type作为函数的第二个参数。这意味着它会更有意义为您实现使用myfield而不是myselect，然后使用field_type参数来决定什么myfield会。

替换在makeForm/EDITFIELD功能行：

myselect.setAttribute("id","selectID");

与

myfield.setAttribute("id",field_id);

一两件事：要设置输入字段的初始值是显示的内容，你会需要复制“父”元素的“innerHTML”。因此，在定义field_parent之后立即放置这样的东西：

initial_value = field_parent.innerHTML;

我想你可以找出其余的。如果不是的话，我可以再详细一点。

来源

2011-10-25 01:57:28 ghbarratt

这很好。不过，我有一个正常的HTML表格，我用 html/php生成的数据从数据库中获取。我想用表单替换这些数据，因此当用户单击编辑按钮时，原始条目是被替换为表单（文本框或下拉菜单）。用户进行选择，新表格将返回相应的编辑。

这是一个脚本，允许双击值来编辑它们，并有一个按钮将它们发回。也许这对使用它（或使用它的一部分）会有一些帮助。

<?PHP 
if(count($_POST)>0) 
{ 
    echo 'You gave:<br><per>'; 
    print_r($_POST); 
    echo '<a href=http://localhost/temp/run.php>Start over</a>'; 
    exit; 
} 

?> 

<html> 
<head> 
<script type="text/javascript"> 

/**formEditor Class 
*/ 
function formEditorCls() 
{ 
     /** 
      Constructor simulator 
     */ 
      this.lastFieldEditedId = null; 


     /** Change span with input box, hide the eddit button and store theses IDS 
     */ 
     this.edit= 
     function (field) 
     {  
      //if there was a field edited previously 
      if(this.lastFieldEditedId != null) 
        this.save(); 
      //get the inner element of the div, it can be span or input text 
      var childElem = document.getElementById(field).getElementsByTagName('*')[0]; 
      //then replace the span element with a input element 
      document.getElementById(field).innerHTML="<input type=text name=n_"+field+ 
       " id=id_"+field+" value="+childElem.innerText+">";  
      //store what was the last field edited 
      this.lastFieldEditedId =field; 

     }//func 

     this.save= 
     function () 
     { 
      dbq="\"";sq='\''; 
      //get the last value 
      var lastValue = document.getElementById(this.lastFieldEditedId). 
      getElementsByTagName('*')[0].value; 
      //store it as span 
      document.getElementById(this.lastFieldEditedId).innerHTML="<span ondblclick="+dbq+ 
      "formEditor.edit("+sq+this.lastFieldEditedId+sq+");"+dbq+" >"+lastValue+"</span>" ; 
      //now must reset the class field attribute 
      this.lastFieldEditedId=null; 
     }//func 

     this.submit= 
     function (path) 
     { 
      this.save();//if ay field was edited put new values in span elements 

      var form = document.createElement("form");//create a new form 
      form.setAttribute("method", "post"); 
      form.setAttribute("action", path); 
      var myDiv = document.getElementById("fieldsDiv");//get the div that contains the fields 
      var inputArr = myDiv.getElementsByTagName("SPAN");//get all span elements in an array 
      //for each span element 

      for (var i = 0; i < inputArr.length; i++) 
      { 
       var hiddenField = document.createElement("input");//create an input elemet 
       hiddenField.setAttribute("type", "hidden"); 
       hiddenField.setAttribute("name", i); 
       hiddenField.setAttribute("value", inputArr[i].innerText); 
       form.appendChild(hiddenField);//append the input element 
      } 
      document.body.appendChild(form);//append the form 
      form.submit();//submit the form 

     }//func 

}//class 

formEditor = new formEditorCls(); 
</script> 

</head> 
<body onclick="rt();"> 

Double click any value to change it..<br><br> 
<div id="fieldsDiv"> 

Name:<font id="nameField"> 
<span ondblclick="formEditor.edit('nameField');" >Mark</span> 
</font><br> 

Surname:<font id="surnameField" > 
<span ondblclick="formEditor.edit('surnameField');">Smith</span> 
</font><br> 

</div> 
<input type=submit name="submit" 
onclick="formEditor.submit('http://localhost/temp/run.php');" value="Submit"> 

</body> 
</html>

来源

2011-10-28 20:49:50 Melsi

在表格中动态创建表格

回答

相关问题