donqh00404 2018-07-11 09:28
浏览 246
已采纳

如何在php中添加编辑按钮

<!DOCTYPE html>
<html>
    <head>
        <title>Dolgozók felvitele</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="urlapcss.css" type="text/css">
    </head>
    <body>
    <div id="container">
        <form id="reg" action="felvitel1.php" method="post">
            <fieldset>
                <legend>Dolgozók</legend>
                <ol>
                    <li>
                        <label for="username1">Név<em>*</em></label>
                        <input id="username1" type="text"  name="username1"/>
                    </li><li>
                        <label for="address">E-mail<em>*</em></label>
                        <input id="address" type="text" name="address" />
                    </li>
                </ol>
            </fieldset>
            <input type="submit" value="OK"/>
            <a href="fooldal.html">Vissza</a>
        </form>
    </div>
    <?php
               $result3 = mysql_query("SELECT * FROM Dolgozók"); 

               echo '<br><br><table id="table">';   
               echo'<th>ID</th><th>Név</th><th>E-mail</th><th>Edit</th>'; 

               while($row = mysql_fetch_array($result3))
               {

               echo'<tr>';
               echo '<td>'.$row['ID']. '</td>' ;
               echo '<td>'.$row['Name'].'</td>';
               echo '<td>'.$row['Email'].'</td>';
               echo '<td>'. "<input class='submit' type='submit' name='submit' value='update' />". '</td>';
               echo'</tr>'; 


               }

               echo '</table>'; 
 ?> 
</body>
</html>

Please help me, I want to edit rows in this table, and I don't know how can I do this. Thank you! Maybe should I create an another php file for edit or use javascript? Let me know if you know the best way to solve this problem.

  • 写回答

2条回答 默认 最新

  • dsi36131 2018-07-11 09:51
    关注

    If you want to deal with table cells editable you can put input type="text" inside the tag. Else you can use bootstrap framework. It provides You can easily find about this from here. Or you could see bootstrap 4 documentation. Here best codepen example by ash blue. Please refer his code

    var $TABLE = $('#table');
    var $BTN = $('#export-btn');
    var $EXPORT = $('#export');
    
    $('.table-add').click(function () {
      var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
      $TABLE.find('table').append($clone);
    });
    
    $('.table-remove').click(function () {
      $(this).parents('tr').detach();
    });
    
    $('.table-up').click(function () {
      var $row = $(this).parents('tr');
      if ($row.index() === 1) return; // Don't go above the header
      $row.prev().before($row.get(0));
    });
    
    $('.table-down').click(function () {
      var $row = $(this).parents('tr');
      $row.next().after($row.get(0));
    });
    
    // A few jQuery helpers for exporting only
    jQuery.fn.pop = [].pop;
    jQuery.fn.shift = [].shift;
    
    $BTN.click(function () {
      var $rows = $TABLE.find('tr:not(:hidden)');
      var headers = [];
      var data = [];
      
      // Get the headers (add special header logic here)
      $($rows.shift()).find('th:not(:empty)').each(function () {
        headers.push($(this).text().toLowerCase());
      });
      
      // Turn all existing rows into a loopable array
      $rows.each(function () {
        var $td = $(this).find('td');
        var h = {};
        
        // Use the headers from earlier to name our hash keys
        headers.forEach(function (header, i) {
          h[header] = $td.eq(i).text();   
        });
        
        data.push(h);
      });
      
      // Output the result
      $EXPORT.text(JSON.stringify(data));
    });
    @import "compass/css3";
    
    .table-editable {
      position: relative;
      
      .glyphicon {
        font-size: 20px;
      }
    }
    
    .table-remove {
      color: #700;
      cursor: pointer;
      
      &:hover {
        color: #f00;
      }
    }
    
    .table-up, .table-down {
      color: #007;
      cursor: pointer;
      
      &:hover {
        color: #00f;
      }
    }
    
    .table-add {
      color: #070;
      cursor: pointer;
      position: absolute;
      top: 8px;
      right: 0;
      
      &:hover {
        color: #0b0;
      }
    }
    <div class="container">
      <h1>HTML5 Editable Table</h1>
      <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>
      
      <ul>
        <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> 
        <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
      </ul>
      
      <div id="table" class="table-editable">
        <span class="table-add glyphicon glyphicon-plus"></span>
        <table class="table">
          <tr>
            <th>Name</th>
            <th>Value</th>
            <th></th>
            <th></th>
          </tr>
          <tr>
            <td contenteditable="true">Stir Fry</td>
            <td contenteditable="true">stir-fry</td>
            <td>
              <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
            <td>
              <span class="table-up glyphicon glyphicon-arrow-up"></span>
              <span class="table-down glyphicon glyphicon-arrow-down"></span>
            </td>
          </tr>
          <!-- This is our clonable table line -->
          <tr class="hide">
            <td contenteditable="true">Untitled</td>
            <td contenteditable="true">undefined</td>
            <td>
              <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
            <td>
              <span class="table-up glyphicon glyphicon-arrow-up"></span>
              <span class="table-down glyphicon glyphicon-arrow-down"></span>
            </td>
          </tr>
        </table>
      </div>
      
      <button id="export-btn" class="btn btn-primary">Export Data</button>
      <p id="export"></p>
    </div>

    So you have to use these as well as php to again upload edited cells. Remember you need php to fill table with data.

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名