php - 当我使用 php 和 html 时，每个单元格都可以编辑吗？

Question

我已经下载了 judicable 并尝试在我的代码中进行操作，以便建立可编辑的单元格并将值返回给 php。我查看了几个示例，它们一直引用该值，并且正在使用下面的当前代码。

有什么方法可以让我当前的代码拥有可编辑的单元格吗？

if(!$link = mysql_connect("localhost", "root", "")) {
     echo "Cannot connect to db server";
}
elseif(!mysql_select_db("Disney")) {
     echo "Cannot select database";
}
else {
     if(!$rs = mysql_query("SELECT * FROM DisneyCharacters")) {
          echo "Cannot parse query";
     }
     elseif(mysql_num_rows($rs) == 0) {
          echo "No records found";
     }
     else {
//      Name, Movie, year, ShoeSize, FavoriteColor, FavoriteFood, PhoneNumber, CharacterType, FavoriteDrink, Address, FavortieTvShow, School, Age, HouseSqFoot, RelationShip, Rating, CarModel, CarYear, Boyfriend,
// NumberFriends, CriminalHistory, HappyEnding, FavoriteLocation, AppleDevice, WorkLocation, Weight, RepublicanDemocratic, DressColor, Shampoo, NumberKids) 

          echo "<table  width=\"400\" height=\"1\" id=\"sortedtable\" class=\"draggable sortable\" cellspacing=\"0\">\n";
          echo "<thead>\n<tr>";
          echo "<th>Name  </th>";
          echo "<th>Movie  </th>";
          echo "<th>Year  </th>";
          echo "<th>Shoe Size </th>";
          echo "<th>Favorite Color </th>";
          echo "<th>Favorite Food </th>";
          echo "<th>Phone Number </th>";
          echo "<th>Character Type </th>";
          echo "<th>Favorite Drink </th>";
          echo "<th>Address </th>";
          echo "<th>Favorite TvShow </th>";
          echo "<th>School </th>";
          echo "<th>Age </th>";
          echo "<th>HouseSqFoot </th>";
          echo "<th>Relationship </th>";
          echo "<th>Rating </th>";
          echo "<th>Car Model </th>";
          echo "<th>Car Year </th>";
          echo "<th>Boyfriend </th>";
          echo "<th>Number Friends </th>";
          echo "<th>Criminal History </th>";
          echo "<th>Happy Ending </th>";
          echo "<th>Favorite Location </th>";
          echo "<th>Apple Device </th>";
          echo "<th>Work Location </th>";
          echo "<th>Weight</th>";
          echo "<th>Republican Democratic </th>";
          echo "<th>Dress Color </th>";
          echo "<th>Shampoo </th>";
          echo "<th>Number Kids </th>";
echo "</tr>\n</thead>\n";


          echo " <tbody>";
          while($row = mysql_fetch_array($rs)) {


               echo "<tr>
                    <td>$row[Name]&nbsp</td>
                    <td>$row[Movie]&nbsp&nbsp</td>
                    <td>$row[Year]&nbsp</td>
                    <td>$row[ShoeSize]&nbsp</td>
                    <td>$row[FavoriteColor]&nbsp</td>
                    <td>$row[FavoriteFood]&nbsp</td>
                    <td>$row[PhoneNumber]&nbsp</td>
                    <td>$row[CharacterType]&nbsp</td>
                    <td>$row[FavoriteDrink]&nbsp</td>
                    <td>$row[Address]&nbsp</td>
                    <td>$row[FavoriteTvShow]&nbsp</td>
                    <td>$row[School]&nbsp</td>
                    <td>$row[Age]&nbsp</td>
                    <td>$row[HouseSqFoot]&nbsp</td>
                    <td>$row[RelationShip]&nbsp</td>
                    <td>$row[Rating]&nbsp</td>
                    <td>$row[CarModel]&nbsp</td>
                    <td>$row[CarYear]&nbsp</td>
                    <td>$row[Boyfriend]&nbsp</td>
                    <td>$row[NumberFriends]&nbsp</td>
                    <td>$row[CriminalHistory]&nbsp</td>
                    <td>$row[HappyEnding]&nbsp</td>
                    <td>$row[FavoriteLocation]&nbsp</td>
                    <td>$row[AppleDevice]&nbsp</td>
                    <td>$row[WorkLocation]&nbsp</td>
                    <td>$row[Weight]&nbsp</td>
                    <td>$row[RepublicanDemocratic]&nbsp</td>
                    <td>$row[DressColor]&nbsp</td>
                    <td>$row[Shampoo]&nbsp</td>
                    <td>$row[NumberKids]&nbsp</td>
                </tr>\n";



          }
           echo " </tbody>";
          echo "</table><br />\n";
     }

}
?>
</div>
</div>
<div class="scrollableContainer3">
 <div class= "scrollingArea3">
Don't find customers for your products,
find products for your customers ~ Seth Codin
</div>
</div> 
<!-- 
Searching & Result
 -->
 <div class="scrollableContainer2">
 <div class= "scrollingArea2">
<?php
    $query = $_GET['query']; 
    // gets value sent over search form

    $min_length = 3;
    // you can set minimum length of the query if you want

    if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then

        $query = htmlspecialchars($query); 
        // changes characters used in html to their equivalents, for example: < to &gt;

        $query = mysql_real_escape_string($query);
        // makes sure nobody uses SQL injection

        $raw_results = mysql_query("SELECT * FROM DisneyCharacters
            WHERE (`Name` LIKE '%".$query."%') OR (`Year` LIKE '%".$query."%') OR(`Movie` LIKE '%".$query."%')") or die(mysql_error());

        if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following
        echo "The result of your search is: <br>";

            while($results = mysql_fetch_array($raw_results)){
                echo "<br>"
                .$results['Name']."&nbsp"
                .$results['Year']."&nbsp"
                .$results['Movie']."&nbsp"
                .$results['ShoeSize']."&nbsp"
                .$results['FavoriteColor']."&nbsp"
                .$results['FavoriteFood']."&nbsp"
                .$results['PhoneNumber']."&nbsp"
                .$results['CharacterType']."&nbsp"
                .$results['FavoriteDrink']."&nbsp"
                .$results['Address']."&nbsp"
                .$results['FavoriteTvShow']."&nbsp"
                .$results['School']."&nbsp"
                .$results['Age']."&nbsp"
                .$results['HouseSqFoot']."&nbsp"
                .$results['RelationShip']."&nbsp"
                .$results['Rating']."&nbsp"
                .$results['CarModel']."&nbsp"
                .$results['CarYear']."&nbsp"
                .$results['Boyfriend']."&nbsp"
                .$results['NumberFriends']."&nbsp"
                .$results['CriminalHistory']."&nbsp"
                .$results['HappyEnding']."&nbsp"
                .$results['FavoriteLocation']."&nbsp"
                .$results['AppleDevice']."&nbsp"
                .$results['WorkLocation']."&nbsp"
                .$results['Weight']."&nbsp"
                .$results['RepublicanDemocratic']."&nbsp"
                .$results['DressColor']."&nbsp"
                .$results['Shampoo']."&nbsp"
                .$results['NumberKids']."";
                echo "<br>";
                echo "</table>";
            }

        }
        else{ // if there is no matching rows do following
            echo "No results";
        }

    }
    else{ // if query length is less than minimum
        echo "Minimum length is ".$min_length;
    }
?>
</div>
</div>

    </body>
</html>

Answer 1

如果您希望能够更改表格中每个单元格的内容，您可以尝试使用 contenteditable 属性。

请注意，我认为这仅适用于 html5。

以下似乎对我使用 firefox 工作正常:

<!DOCTYPE HTML>
<html>
<body>
<div contenteditable="true">
  <table>
    <tr>
      <td>Name</td>
      <td>Movie</td> 
      <td>Year</td>
    </tr>
  </table>
</div>
</body>
</html>

引用:Content Editable

如果我正确理解了这个问题，您还需要将表格数据发送到服务器以更新您的数据库。这可以通过使用像这样的 ajax 来完成:

$(document).ready(function() {
  var objects = [];
  $('#send-btn').click(function() {
    $("table tr").each(function() {
      var obj = {};
      // get this rows id so we know which row to update
      obj.id = $(this).data('id');
      // each td has an data attribute `data-val`
      $(this).find("td").each(function() {
        var attrib = $(this).data('val');
        obj[attrib] = $(this).text();
      });
      objects.push(obj);
    });
    // send request with data to server 
    jQuery.ajax({
      url:'update.php',
      type:'POST',
      data:'data=' + JSON.stringify(objects),
      success:function() {

      }
    });
  });
});

在这种情况下，您应该添加一个名为 data-val 的属性，其中包含单元格值所属列的某种标识符，您还需要知道要更新的记录，以便您可以为每一行设置一个 data-id 属性:

<tr data-id="1">
  <td data-val="name">Harry Potter</td>
  <td data-val="movie">Deliverance</td>
  <td data-val="year">2014-04-04</td>
</tr>