在表格中動態創建表格

使用一些代碼來動態創建表格：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

在表格中動態創建表格

回答

相關問題