将php表转换为多个javascript文本框

时间:2013-12-03 13:33:04

标签: javascript php html

我使用ajax从数据库中选择数据并在表格中显示数据。然而,我发现这是不可编辑的。我希望在当前页面上编辑返回的数据。是否可以编辑表格,如果不是,我将如何更改表格数据并将其插入到javascript文本框中。提前谢谢。

HTML:

<head>
<link href="../UserTemplate.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Tours</title>
<script language="javascript" type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>


<br>
<div id="txtHint"></div>

</body>
</html>
</script>
</head> 
<body>
<div id="MainDiv">
    <div id="Header">
            <div id="Logo"><img src="../Scotia Sea Life Logo.png" width="150px" height="110px" alt="Company Logo"/></div>
            <div id="NavBar"><ul>
                        <a href="homepage.php">Home</a> <a href="SelectStudentScore.php">Tours</a> <a href="AdditionPageMain.php">About</a> <a href="SubtractionPageMain.php">Donate</a> <a href="Devisionmain.php">Account</a>
               </ul>
      </div>     
            <div id="Title">Tours</div>
  </div>
        <div id="Content">
          <div id="Search">
            <div id="SearchDiv">
            <form id="SelectTourForm" style="margin:5px;">
            <table border="0" align="center" width="100%">
                            <tr>
                                <td width="44%"><label id="lbl_TourNumber" style="color:#FFF; padding-left: ">Tour Number</label></td>
                                <td width="56%"><input type="text" name="txt_TourNumber" id="txt_TourNumber" placeholder="e.g. A123" style="width:100px;"/></td>
                            </tr>
            </table>
            <table border="0" align="center" width="100%">
                            <tr>
                                <td>
                                <select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;" onchange="showUser(this.value)">
                                  <option>Please Select</option>
                                                 <?php 
                                                 include 'populatedrodown.php';
                                                 foreach ( $results as $option ) : ?>
                                                      <option value="<?php echo $option->Date; ?>"><?php echo $option->Date; ?></option>
                                                 <?php endforeach; ?>
                                            </select>
                                </select>
                                </td>
                            </tr>
                            <tr> 
                              <td><input type="text" name="txt_Count" id="txt_Count" style="width:100px;"/><input type="submit" name="btn_TourSearch" id="btn_TourSearch" value="Search" style="background:#009300; border-radius:5px; border-color:#009300; color:#FFF; float:right; margin-right:5px;" /></td>
                            </tr>
            </table>

                        <p>&nbsp;</p>
                    </form>
              </form>

            </div>
          </div>

       <div id="DetailsDiv">
            <div id="DetailsContent">
                <form id="DetailsForm" >
                    <table border="0" align="center" width="100%">
                    <tr><td><label style="color:#FFF; font-size:14px;">Tour ID</label> <input type="text" id="Tour_ID" />    </td></tr>
                    <tr><td><label>Duration</label> <input type="text" id="txt_Duration" />   </td></tr>
                    <tr><td><label>Vessel Name</label> <input type="text" id="txt_Vessel_Name"/> </td></tr>
                    <tr><td><label>Location</label> <input type="text" id="txt_Location" />   </td></tr>
                    <tr><td><label>Date</label> <input type="text" id="txt_Date" />       </td></tr>
                    <tr><td><label>Available</label> <input type="text" id="txt_Available" />  </td></tr> 
                    <tr><td><label>Price</label>  <input type="text" id="txt_Price" />     </td></tr>         
                    </table>
                </form>
            </div>
          </div>
        </div>
        <div id="Footer">
        <div id="FooterLinks"></div>
    </div>
</div>
</body>
</html>

PHP:

<?php
$q = $_GET['q'];

$con = mysqli_connect('localhost','root','pwd','db');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"Tours.php");
$sql="SELECT * FROM Tour WHERE Date = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Tour_ID</th>
<th>Duration</th>
<th>Vessel_Name</th>
<th>Location</th>
<th>Date</th>
<th>Available</th>
<th>Price</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {

  echo "<tr>";
  echo "<td>" . $row['Tour_ID'] . "</td>";
  echo "<td>" . $row['Duration'] . "</td>";
  echo "<td>" . $row['Vessel_Name'] . "</td>";
  echo "<td>" . $row['Location'] . "</td>";
  echo "<td>" . $row['Date'] . "</td>";
  echo "<td>" . $row['Available'] . "</td>";
  echo "<td>" . $row['Price'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
$dur = $row['Duration'];
mysqli_close($con);
?>

2 个答案:

答案 0 :(得分:1)

正如拉维所说, @Seatter,是的,你可以回复文本框,如:

echo "<td> <input type='text' name='anyname' value='".$row['Tour_ID']."' /> </td>";

感谢您的快速回复。

答案 1 :(得分:0)

是的,您可以通过PHP在文本框中回显您的值,如下所示:

echo "<td> <input type='text' name='anyname' value='".$row['Tour_ID']."' /> </td>";

此外,您可以使用JQuery选择器,执行所有文本框的选择并执行一些ajax更新

echo "<td> <input class='mytext' type='text' name='anyname' value='".$row['Tour_ID']."' /> 
echo "<td> <input class='mytext' type='text' name='anyname' value='".$row['Duration']."' /> 
echo "<td> <input class='mytext' type='text' name='anyname' value='".$row['Vessel_Name']."' /> 
echo "<td> <input class='mytext' type='text' name='anyname' value='".$row['Location']."' /> </td>";


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>

<script type="text/javascript">
$(document).ready(function(){
    $(".mytext").blur(function(){    // <--- here $(".mytext") is the selector for all html elements declared with class "mytext", in this example we have textfields to be selected. it will associate all those textboxes' onBlur() event with given code
        var updated_value=$(this).val();
        //write here ajax call to PHP script to update value in database table.
    });
});
</script>

您可能希望查找JQuery selectorsJQuery Ajax

希望,它会对你有所帮助。 :)