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