テーブル内でフォームを動的に作成する

ここにあるフォームを動的に作成するためのコードを使用してください：http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm テーブル内でフォームを動的に作成する

しかし、私はデータベースからデータを取得するためにhtml/phpで生成する通常のhtmlテーブルを持っています。そのデータをフォームに置き換えたいので、ユーザーが編集ボタンをクリックすると、元のエントリがフォーム（テキストボックスまたはプルダウンメニュー）に置き換えられます。ユーザーが選択を行い、新しい表に適切な編集が戻されます。

したがって、たとえば、データの一部がテーブルにこれを持っている：

フォームを作成するについてのリンクを使用して

<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 tableを置き換えます（たとえば、テーブルにfooという名前が返され、テキストボックスにfooが表示されますが、編集して名前を変更してください）。

出典

2011-10-24 Tom

チャンスごとに、jQueryを使用したり、使用しないでください。これは、このようなことを簡単にします。 – ghbarratt

tdのIDで始めることができれば、作業が楽になります。次に、どこかに編集ボタンが必要です。注意：これは、値/フィールドの名前で「result_0」を置き換えるために良いことかもしれません。それがために、TDの内容を設定するよう

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

次に、あなたのJavaScriptで、あなたがeditField関数が定義されていますダイナミックフォーム。、あなたはappendChild(myform);機能あなたがパラメータとしてFIELD_IDとfield_typeに合格する以外editFieldがmakeForm関数のようになりますと、この出来事を参照してくださいJavaScriptの例ではmakeForm機能を見てみると：

function editField(field_id, field_type)

私はあなたがその行を変更示唆します

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

E：あなたのケースで、それは段落要素が、TD（あるいは要素のいくつかの他のタイプ）ではありませんので、代わりにmytdまたはより良いまだ、field_parentを定義するためにmyparaを定義しますサンプルコードはselect（ドロップダウン）を作成しますが、他のフィールド入力タイプを作成したいと思っていますので、field_typeを関数の第2パラメータとして使用することをお勧めします。これは、myselectの代わりにmyfieldを使用し、次に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/phpを使ってDBからデータを取得するために生成する通常のhtmlテーブルを持っています。そのデータをフォームに置き換えたいので、ユーザーが編集ボタンをクリックすると元のエントリはがフォーム（テキストボックスまたはプルダウンメニュー）に置き換えられます。ユーザーが選択され、適切なの編集を行った新しい表が戻ってきます。

これは、値をダブルクリックして編集することができ、それらを返送するためのボタンがあるスクリプトです。たぶんそれを使用する（またはその一部を使用する）のに役立つだろう。

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

テーブル内でフォームを動的に作成する

答えて

関連する問題