Question

我需要编辑HTML表格中的一行。以下是带有PHP值的HTML表的代码：

<table cellpadding="2" border="1">
   <tr>
      <th align="center">اسم البضاعة</th>
      <th align="center">الرمز</th>
      <th align="center">النوع</th>
      <th align="center">الموزع</th>
      <th align="center">مكان التخزين</th>
      <th align="center">الكمية</th>
      <th align="center">السعر الاساسي الإفرادي</th>
      <th align="center">سعر مبيع القطعة</th>
      <th align="center">العدد المباع</th>
      <th align="center">التاريخ</th>
   </tr>
   <?php foreach($result5 as $rows)
    {
    ?>
   <tr>
      <td align="center"><?php echo $rows['item_name'] ?></td>
      <td align="center"><?php echo $rows['item_code'] ?></td>
      <td align="center"><?php echo $rows['item_cat'] ?></td>
      <td align="center"><?php echo $rows['supplier'] ?></td>
      <td align="center"><?php echo $rows['item_location'] ?></td>
      <td align="center"><?php echo $rows['quantity'] ?></td>
      <td align="center"><?php echo $rows['init_price'] ?></td>
      <td align="center"><?php echo $rows['buy_price'] ?></td>
      <td align="center"><?php echo $rows['item_sold'] ?></td>
      <td align="center"><?php echo $rows['date_now'] ?></td>
      <td align="center">
         <form action='MY NEW PAGE HERE .PHP' method="post">
            <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
             <input class="imgClass_edit" type="submit" name="update_invent" value="" />
          </form>
        </td>
      </tr>
       <?php
        } 
        ?>
    </table>

这是一张图片，显示了我刚刚用编辑按钮添加的一些任意信息：

现在，我需要做的是，当我点击一行的编辑按钮，停留在同一页面时，但是我要编辑它的行将转换为文本框我可以编辑值，然后保存它们。 那么，有人对此有所了解吗？

修改

我尝试了这个，我创建了一个与上面相同的新页面，当点击编辑按钮时，我们将转到它，我们有一行，它等于从最后一页发布的id，放文本框，否则正常回显数据。但是现在所有的行都是文本框，而不仅仅是我想要的行。以下是新页面的代码：

<?php
require_once('../include/global.php');
$result5 = '';

//ID from the last page that is posted as hidden:
$id = $_POST['rowid'];
try{
    $query5 = ("SELECT * FROM inventory ORDER BY date_now DESC, id DESC");
    $stmt5 = $conn->prepare($query5);
    $count5 = $stmt5->execute();
    $result5 = $stmt5->fetchAll();


    //header("location: debts.php");
}
catch(PDOException $e) {
    echo $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Phone Store Web App</title>
<link rel="stylesheet" href="../include/stat.css" type="text/css">
<script type="text/javascript" src="../include/jquery.min.js"></script>
<script type="application/javascript" src="../include/printing.js"></script>
</head>
<body>
<div id="header"> <a href="home.php"><img src="images/logo.jpg"></a> </div>
<center>
  <a href="logout.php">Logout</a>
</center>
<div id="nav"><center>التقرير اليومي<a href="DReport.php"><div><img width="50" height="50" src="../images/daily_reports_icon.png" alt="Done" /><br>
</div></a></center>
  <center>
    التقرير الشهري<a href="Mreport.php"><div><img width="50" height="50" src="../images/daily_reports_icon_month.png" alt="Done" /><br>
</div></a></center>
<center>
   ديون<a href="debts.php">
    <div><img width="50" height="50" src="../images/debt.png" alt="Done" /><br>
</div></a></center>
<center>
  بضاعة<a href="invent.php">
    <div><img width="50" height="50" src="../images/inventory.png" alt="Done" /></div></a></center>
<center>
  Login status<a href="login_status.php">
    <div><img width="50" height="50" src="../images/login_details.png" alt="Done" /></div></a></center><br>
</div>
<center>
<div id="section2" align="center" dir="ltr">
<center>
<form class="form-style-9" action="insert.php" method="post">
<ul>
<li>
    <input type="text" name="item_code" class="field-style field-split align-left" placeholder="الرمز code" />
    <input type="text" name="item_name" class="field-style field-split align-right" placeholder="اسم البضاعة" />

</li>
<li>
    <select class="container" id="select_type" name="item_cat">
            <option value="بطاقات">بطاقات</option>
            <option value="هواتف">هواتف</option>
            <option value="اكسسوارات">اكسسوارات</option>          </select>
    <input type="text" name="supplier" class="field-style field-split align-right" placeholder="الموزع" />
</li>
<li>
<input type="text" name="item_location" class="field-style field-split align-left" placeholder="مكان التخزين" />

<input type="text" name="quantity" class="field-style field-split align-right" placeholder="الكمية"/>
</li>
<li>
<input type="text" name="init_price" class="field-style field-split align-right" placeholder="سعر القطعة الأساسي" />

<input type="text" name="buy_price" class="field-style field-split align-left" placeholder="سعر المبيع"/>
</li>
<li>
  <input type="submit" name="submit_items" value="إضافة المعلومات" />
</li>
</ul>
</form>
</center>
</div>
<div id="section2" dir="ltr">
<table class="imagetable" border="1" cellspacing="2" cellpadding="2">
<tr>
<th align="center">اسم البضاعة</th>
<th align="center">الرمز</th>
<th align="center">النوع</th>
<th align="center">الموزع</th>
<th align="center">مكان التخزين</th>
<th align="center">الكمية</th>
<th align="center">السعر الاساسي الإفرادي</th>
<th align="center">سعر مبيع القطعة</th>
<th align="center">العدد المباع</th>
<th align="center">التاريخ</th>
</tr>
<?php foreach($result5 as $rows) {

    if($rows['id'] = $id)
    {

    ?>
<tr>
<td align="center"><input type="text" value="<?php echo $rows['item_name'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_code'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_cat'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['supplier'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_location'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['quantity'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['init_price'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['buy_price'] ?>"/></td>
<td align="center"<input type="text" value="><?php echo $rows['item_sold'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['date_now'] ?>"/></td>
<td align="center"><form action='' method="post">
          <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
          <input class="imgClass_edit" type="submit" name="update_invent" value="" />
        </form></td>

        <?php } else { ?>
        <td align="center"><?php echo $rows['item_name'] ?></td>
<td align="center"><?php echo $rows['item_code'] ?></td>
<td align="center"><?php echo $rows['item_cat'] ?></td>
<td align="center"><?php echo $rows['supplier'] ?></td>
<td align="center"><?php echo $rows['item_location'] ?></td>
<td align="center"><?php echo $rows['quantity'] ?></td>
<td align="center"><?php echo $rows['init_price'] ?></td>
<td align="center"><?php echo $rows['buy_price'] ?></td>
<td align="center"><?php echo $rows['item_sold'] ?></td>
<td align="center"><?php echo $rows['date_now'] ?></td>
<td align="center"><form action='' method="post">
          <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
          <input class="imgClass_edit" type="submit" name="update_invent" value="" />
        </form></td>
</tr>
<?php } } ?>
</table>
</div>
</center>
</body>
</html>

现在我有了这张图片：

Answer 1

你可以用它。编辑所有TD。

<td align="center"><input type="text" name="YourFieldNames" value="<?php echo $rows['item_name'] ?>" disabled ></td>

在<tr>代码后移动您的打开表单。

然后使用jQuery或JavaScript删除禁用的输入属性。

Answer 2

如何使用标准javascript实现此目标的基本示例。这只有一行静态数据，但原则应足以让您将其应用于记录集循环。

<!doctype html>
<html>
    <head>
        <title>Change table cell contents to text fields</title>
        <script type='text/javascript'>
            /* Find the buttons and bind listeners to them */
            function bindEvents(){
                var form=document.getElementById('editdata');
                var col=form.querySelectorAll('input[name="update_event"]');
                for( var n in col ) if( col[n] && col[n].nodeType==1 ) col[n].onclick=evtListener
            }
            /* The function that does the main work */
            function evtListener(event){
                var el=typeof(event.target)!='undefined' ? event.target : event.srcElement;
                var parent=el.parentNode.parentNode;
                /* Get all child nodes that have the data-name attribute */
                var col=parent.querySelectorAll('td[data-name]');

                for( var n in col )if( col[n] && col[n].nodeType==1 ){
                    /* get the value in the table cell - store in a var */
                    var str=col[n].innerHTML;
                    /* Generate the new text input field */
                    var oInput=document.createElement('input');
                        oInput.setAttribute('type','text');
                        oInput.setAttribute('name',col[n].dataset.name);
                        oInput.setAttribute('value',str);

                    /* Append the text field into the tablecell */
                    col[n].innerHTML='';
                    col[n].appendChild( oInput );
                }
            }
            document.addEventListener('DOMContentLoaded',bindEvents,false );
        </script>
    </head>
    <body>
        <form id='editdata' action='' method="post">
            <table cellpadding="2" border="1">
                <tr>
                    <th align="center">اسم البضاعة</th>
                    <th align="center">الرمز</th>
                    <th align="center">النوع</th>
                    <th align="center">الموزع</th>
                    <th align="center">مكان التخزين</th>
                    <th align="center">الكمية</th>
                    <th align="center">السعر الاساسي الإفرادي</th>
                    <th align="center">سعر مبيع القطعة</th>
                    <th align="center">العدد المباع</th>
                    <th align="center">التاريخ</th>
                </tr>
                <tr><!-- Single row of static data for example purposes -->
                    <td align="center" data-name='item_name'>hobble</td>
                    <td align="center" data-name='item_code'>gobble</td>
                    <td align="center" data-name='item_cat'>gabble</td>
                    <td align="center" data-name='supplier'>rabble</td>
                    <td align="center" data-name='item_location'>dabble</td>
                    <td align="center" data-name='quantity'>babble</td>
                    <td align="center" data-name='init_price'>bobble</td>
                    <td align="center" data-name='buy_price'>bubble</td>
                    <td align="center" data-name='item_sold'>wobble</td>
                    <td align="center" data-name='date_now'>wibble</td>
                    <td align="center">
                        <input type="hidden" name="rowid" value="1" /><!-- edit this to be dynamic also -->
                        <input class="imgClass_edit" type="button" name="update_event" value="edit" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Answer 3

您可以改用此插件。使用以下链接 http://www.appelsiini.net/projects/jeditable

Answer 4

使用PHP和HTML代码，使用IF ELSE语句：当我点击第一页的编辑按钮时，我将转到包含此代码的下一页：

这是显示结果的图像：

<?php
require_once('../include/global.php');
$result5 = '';
$id = $_POST['rowid'];
try{
    $query5 = ("SELECT * FROM inventory ORDER BY date_now DESC, id DESC");
    $stmt5 = $conn->prepare($query5);
    $count5 = $stmt5->execute();
    $result5 = $stmt5->fetchAll();


    //header("location: debts.php");
}
catch(PDOException $e) {
    echo $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Phone Store Web App</title>
<link rel="stylesheet" href="../include/stat.css" type="text/css">
<script type="text/javascript" src="../include/jquery.min.js"></script>
<script type="application/javascript" src="../include/printing.js"></script>
</head>
<body>
<div id="header"> <a href="home.php"><img src="images/logo.jpg"></a> </div>
<center>
  <a href="logout.php">Logout</a>
</center>
<div id="nav"><center>التقرير اليومي<a href="DReport.php"><div><img width="50" height="50" src="../images/daily_reports_icon.png" alt="Done" /><br>
</div></a></center>
  <center>
    التقرير الشهري<a href="Mreport.php"><div><img width="50" height="50" src="../images/daily_reports_icon_month.png" alt="Done" /><br>
</div></a></center>
<center>
   ديون<a href="debts.php">
    <div><img width="50" height="50" src="../images/debt.png" alt="Done" /><br>
</div></a></center>
<center>
  بضاعة<a href="invent.php">
    <div><img width="50" height="50" src="../images/inventory.png" alt="Done" /></div></a></center>
<center>
  Login status<a href="login_status.php">
    <div><img width="50" height="50" src="../images/login_details.png" alt="Done" /></div></a></center><br>
</div>
<center>
<div id="section2" align="center" dir="ltr">
<center>
<form class="form-style-9" action="insert.php" method="post">
<ul>
<li>
    <input type="text" name="item_code" class="field-style field-split align-left" placeholder="الرمز code" />
    <input type="text" name="item_name" class="field-style field-split align-right" placeholder="اسم البضاعة" />

</li>
<li>
    <select class="container" id="select_type" name="item_cat">
            <option value="بطاقات">بطاقات</option>
            <option value="هواتف">هواتف</option>
            <option value="اكسسوارات">اكسسوارات</option>          </select>
    <input type="text" name="supplier" class="field-style field-split align-right" placeholder="الموزع" />
</li>
<li>
<input type="text" name="item_location" class="field-style field-split align-left" placeholder="مكان التخزين" />

<input type="text" name="quantity" class="field-style field-split align-right" placeholder="الكمية"/>
</li>
<li>
<input type="text" name="init_price" class="field-style field-split align-right" placeholder="سعر القطعة الأساسي" />

<input type="text" name="buy_price" class="field-style field-split align-left" placeholder="سعر المبيع"/>
</li>
<li>
  <input type="submit" name="submit_items" value="إضافة المعلومات" />
</li>
</ul>
</form>
</center>
</div>
<div id="section2" dir="ltr">
<table class="imagetable" border="1" cellspacing="2" cellpadding="2">
<tr>
<th align="center">اسم البضاعة</th>
<th align="center">الرمز</th>
<th align="center">النوع</th>
<th align="center">الموزع</th>
<th align="center">مكان التخزين</th>
<th align="center">الكمية</th>
<th align="center">السعر الاساسي الإفرادي</th>
<th align="center">سعر مبيع القطعة</th>
<th align="center">العدد المباع</th>
<th align="center">التاريخ</th>
</tr>
<?php foreach($result5 as $rows) { ?>


<tr>
    <?php if($rows['id'] == $id)
    {

    ?>
<td align="center"><input type="text" value="<?php echo $rows['item_name'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_code'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_cat'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['supplier'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['item_location'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['quantity'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['init_price'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['buy_price'] ?>"/></td>
<td align="center"<input type="text" value="><?php echo $rows['item_sold'] ?>"/></td>
<td align="center"><input type="text" value="<?php echo $rows['date_now'] ?>"/></td>
<td align="center"><form action='' method="post">
          <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
          <input class="imgClass_edit" type="submit" name="update_invent" value="" />
        </form></td>

        <?php } else { ?>
        <td align="center"><?php echo $rows['item_name'] ?></td>
<td align="center"><?php echo $rows['item_code'] ?></td>
<td align="center"><?php echo $rows['item_cat'] ?></td>
<td align="center"><?php echo $rows['supplier'] ?></td>
<td align="center"><?php echo $rows['item_location'] ?></td>
<td align="center"><?php echo $rows['quantity'] ?></td>
<td align="center"><?php echo $rows['init_price'] ?></td>
<td align="center"><?php echo $rows['buy_price'] ?></td>
<td align="center"><?php echo $rows['item_sold'] ?></td>
<td align="center"><?php echo $rows['date_now'] ?></td>
<td align="center"><form action='' method="post">
          <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
          <input class="imgClass_edit" type="submit" name="update_invent" value="" />
        </form></td>
</tr>
<?php } } ?>
</table>
</div>
</center>
</body>
</html>

通过将表格转换为同一页面中的文本框来编辑表格的一行

4 个答案: