Question

我有一个表单，显示数据库表中的行和每行的更新按钮。

我需要在按钮单击（ADD ENTRY）上添加一个空白行，与表格中的上一行完全相同，并使用此行添加一个带有此行的保存按钮（更新按钮）。

以下是HTML和我使用的JS。这就是我的网页的样子：

<?php

include('adodb/adodb.inc.php');

echo '<h1>Mxpresso Revenue Management Solution</h1>';

echo '<img src="http://mxpresso.com/images/logo.png" alt="mxpresso logo" style="width:171px;height:108px;">';

echo '<h2>See existing records</h2>';

$db=NewADOConnection('mysql');$db->Connect("127.0.0.1", "vc", "abc", "vc");

$sql="select * from rev";
$result = $db->Execute($sql);
if ($result === false) die("failed2");
$records=array();
$count=$result->RecordCount();
echo "Total Records Found :".$count."<br>";

if($count > 0) {
    echo '<style>
          input{
             outline:none;
             border: none;
           }

           </style>

<table id="datatable" class="form" border="1" width="50%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<tbody>
<tr>
<th><h4>OfferID</h4></th>
<th><h4>AffID</h4></th>
<th><h4>Deduction</h4></th>
<th><h4>Status</h4></th>
<th><h4>Update Entry</h4></th>
</tr>';

    while (!$result->EOF){
        $offerId=$result->fields[0];
        $affId=$result->fields[1];
        $status=$result->fields[2];
        $deduction=$result->fields[3];                                       

       echo'<form target="_blank" action ="updatecopy.php" id="myform" method="get">


            <tr>        
                        <td><input type="text" name="update_for_offerid" value='.$offerId.'></td>
                        <td><input type="text" name="update_for_affid"  value='.$affId.'></td>
                        <td><input type="text" name="deduct" value='.$deduction.'></td>
                        <td><input type="text" name="status" value='.$status.' ></td>
                        <td><input type="submit" size="23" value="Update Entry" style="color : Black;width:165px"></td>

                    </tr>

                    </form>';
        $rec=array("offerId"=>$offerId,"affiliate_id"=>$affId,"status"=>$status, "deduction"=>$deduction);
        array_push($records,$rec);
        $result->MoveNext(); 
        }
 }

 echo '</tbody>
    </table>    

    <div id="dynamicinput1">

    </div>
    <form><input type="button" value="Add Entry" style="font-family: sans-serif; font-size: 15px; color : Black;" onClick="addInput(\'dynamicinput1\');">
    </form>


        <script language="Javascript" type="text/javascript">
        var counter = 1;
        var limit = 10;

      function addInput(divName){

     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {



          var fool = document.createElement(\'form\');

          var newtable = document.createElement(\'Table\');

          var tr = document.createElement(\'tr\');
          newtable.style.border = "1px solid black";
          tr.style.width="10px";


            var td1  =  document.createElement(\'td\');
            td1.innerHTML = "<br><input type=\'text\' name=\'offerId\'>";
            td1.style.border = "1px solid black";


            var td2  =  document.createElement(\'td\');
            td2.innerHTML ="<br><input type=\'text\' name=\'affId\'>";
            td2.style.border = "1px solid black";


            var td3  =  document.createElement(\'td\');
            td3.innerHTML ="<br><input type=\'text\' name=\'status\'>";
            td3.style.border = "1px solid black";


            var td4  =  document.createElement(\'td\');
            td4.innerHTML ="<br><input type=\'text\' name=\'deduct\'>";
            td4.style.border = "1px solid black";

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);


            newtable.appendChild(tr);

            fool.appendChild(newtable);
            fool.action = "insertcopy.php"
            var save = document.createElement(\'input\');
            save.type = "submit";
            save.value = "Save Entry";
            fool.appendChild(save);
            tr.appendchild(save);



            document.getElementById(divName).appendChild(fool);
            counter++;



     }
}
</script>';
?>

Answer 1

It may help you.

＆＃13;

$(document).ready(function() {
    $('a').click(function() {
       $('#myTable tbody').append('<tr class="child"><td><input type="text"></td><td><input type="text"></td><td<input type="text"></td><td><input type="text"></td><td><input type="text"></td><td>submit</td></tr>');
    });
});

＆＃13;

input{
  width:40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="javascript:void(0);">add new</a>
<table id="myTable">
  <thead>
    <tr>
      <td>offerID</td>
      <td>affid</td>
      <td>deduction</td>
      <td>status</td>
      <td>update entry</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td>231</td>
      <td>12</td>
      <td>654</td>
      <td>update</td>
    </tr>
    
    <tr>
      <td>123</td>
      <td>231</td>
      <td>12</td>
      <td>654</td>
      <td>update</td>
    </tr>
    
    <tr>
      <td>123</td>
      <td>231</td>
      <td>12</td>
      <td>654</td>
      <td>update</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

编写一个sql查询以向表中添加数据。然后执行sql查询例： $ SQL =＆＃34; INSERT INTO table_name（column_name1，column_name2 ...）VALUES（＆＃39; $ val1＆＃39;，＆＃39; $ val2＆＃39;）＆＃34 ;; $ exeSQL = mysql_query（$ SQL）或die（mysql_error（））;

如何使用javascript将一行输入框添加到现有的html表单中

2 个答案: