Question

使用一些代码动态创建表单，我在这里：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事件：

这很难解释，但希望有人可以帮助我进行这种互动。我需要一些方式来说： if（用户点击编辑按钮）然后将html表替换为每个条目的表单（例如，该表返回一个名为foo的名称，文本框中将显示foo，但现在可以编辑以更改名称）。

Answer 1

如果您可以从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");

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

替换makeForm / editField函数中的行：

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

与

myfield.setAttribute("id",field_id);

还有一件事：要将输入字段的初始值设置为显示的内容，您需要复制“parent”元素的“innerHTML”。所以在定义field_parent之后放置这样的东西：

initial_value = field_parent.innerHTML;

我认为你可以弄清楚其余部分。如果没有，我可以再说一点。

Answer 2

这很有效。但是我有一个我生成的常规html表 html / php从数据库中获取数据。我想用a替换那些数据表单，当用户单击编辑按钮时，原始条目是替换为表单（文本框或下拉菜单）。用户做出选择，新表返回适当的编辑。

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

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

在表中动态创建表单

2 个答案: