Html dynamic table


Html dynamic table

嘿,我有一个只有一行的表....我需要在我的表格中有一个添加按钮来添加另一行,后者当用户点击提交时,所有表数据应输入到数据库中。我创建了一个单行表,它可以很好地将数据输入数据库,任何人都可以帮我修改我的代码以具有添加行功能并在提交时将数据输入数据库。我的 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);
}

如果您向行中的 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>