Html動態表

Question

哎我有一張表只有一行.... 我需要在我的表中添加一個按鈕來添加另一行， 後者當用戶點擊提交所有表格數據時應該輸入數據庫。 我已經創建了一個單行表，它可以很好地將數據輸入到數據庫中，任何請幫助我修改我的代碼以具有添加行功能並提交將數據輸入數據庫。我的Html和PHp文件如下。請幫忙 ！

<form name="myForm" 
     method="post" 
     action="to_db.php" 
     onSubmit="alert('YOUR REQUEST HAS BEEN RECEIVED.');" > 

<TABLE BORDER=0>  
    <TR> 
     <TD>Department</TD> 
     <TD> 
      <select name="department"> 
       ... 
      </select> 
     </TD> 
     <TD>Date Submitted</TD> 
     <TD><input type="date" name="bday" /></TD> 
    </TR> 
    <TR> 
     <TD>Requested by</TD> 
     <TD><INPUT type=text name="reqby" /></TD> 
     <TD>priority</TD> 
     <TD> 
      <select name="priority"> 
       ... 
      </select> 
     </TD> 
    </TR> 
    <TR> 
     <TD>Description Of Change:</TD> 
     <TD><textarea name="doc" id="doc" cols="25" rows="3"></textarea></TD> 
    </TR> 
    <TR> 
     <TD>Bussiness Impact Of Change:</TD> 
     <TD> <textarea name="boc" id="doc" cols="25" rows="3"></textarea></TD> 
    </TR> 
</TABLE> 

<table class="dynatable1"> 
    <thead> 
      <tr> 
       <th>Bussiness Process Impacted</th> 
       <th>Tools Used/System Impacted</th> 
       <th>Bussiness Driver description</th> 
       <th>Impact category</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td><textarea name="v1" cols="30" row="1" id="demo3" value=""></textarea></td> 
       <td><textarea name="v2" cols="50" rows="2" id="demo1" value="" /></textarea></td> 
       <td><textarea name="v3" cols="50" rows="2" id="demo2" value="" /></textarea></td> 
       <td> 
        <select name="v4"> 
         ... 
        </select> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

<input name ="printbtn" type="image" src="submit.jpg" class="submit" value="SUBMIT" >    
</form> 

我的PHP文件如下：

$dbhandle= mysql_connect($hostname,$username,$password) or die("Unable to connect to database"); 

$selected = mysql_select_db("form",$dbhandle) or die("could not select the database"); 

$val1 = $_POST['crno']; 
$val2 = $_POST['department']; 
$val3 = $_POST['bday']; 
$val4 = $_POST['reqby']; 
$val5 = $_POST['priority']; 

if(isset($_POST['doc'])) 
{ 
    $dec_of_change = $_POST['doc']; 
} 
if(isset($_POST['boc'])) 
{ 
    $bus_of_change = $_POST['boc']; 
} 
if(isset($_POST['v1'])) 
{ 
    $variable_string1 = $_POST['v1'];  
} 
if(isset($_POST['v2'])) 
{ 
    $variable_string2 = $_POST['v2']; 
} 
if(isset($_POST['v3'])) 
{ 
    $variable_string3 = $_POST['v3'];  
} 
if(isset($_POST['v4'])) 
{ 
    $variable_string4 = $_POST['v4']; 
} 

if (
    $val2 == "" || 
    $val3 == "" || 
    $val4 == "" || 
    $val5 == "" || 
    $dec_of_change == "" || 
    $bus_of_change == "" || 
    $variable_string1 == "" || 
    $variable_string2 == "" || 
    $variable_string3 == "" 
) { 
    echo "Fill the entire form "; 
    header("Location: fill.html"); 
    } 

else { 
    $sql=" INSERT INTO  fill1 (
           department, date, reqby, 
           priority, doc, boc, 
           bpi, tu, bd, ic 
          ) 
      VALUES (
           '$val2', '$val3', '$val4', 
           '$val5', '$dec_of_change', '$bus_of_change', 
           '$variable_string1', '$variable_string2', '$variable_string3', '$variable_string4' 
          )"; 
    $result=mysql_query($sql); 
    header("Location: startpage.html"); 

mysql_close($dbhandle); 
} 

Answer 1

如果添加一個按鈕，一個TD行內可以複製的行，並使用類似的東西添加到表：

// Helper function 
function upTo(el, tagName) { 
    el = el && el.parentNode; 
    tagName = tagName.toLowerCase(); 

    for (;el; el = el.parentNode) { 
    if (el.tagName && el.tagName.toLowerCase() == tagName) { 
     return el; 
    } 
    } 
    return null; 
} 

// Row cloning function 
function cloneRow(el) { 
    var newRow; 
    var row = el && upTo(el, 'tr'); 

    if (row) { 
    newRow = row.cloneNode(true); 
    row.parentNode.appendChild(newRow); 
    } 
} 

請注意，您在HTML中已經有重複的ID，這會創建更多。重複的名字很好。

你可能會做表：

<table> 
    ... 
    <tr> 
    ... 
    <td><button type="button" onclick="cloneRow(this)">Add a row</button> 
    ... 
</table>