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

如何在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>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • dongpian6319 2018-07-11 10:36

    I found a posibility, but every time when I'm trying to edit the row, the program create a new row with the edited row.

      <?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>'; 
    
                   while($row = mysql_fetch_array($result3))
                   {
    
                   echo'<tr>';
                   echo '<td>'.$row['ID']. '</td>' ;
                   echo '<td>'.$row['Name'].'</td>';
                   echo '<td>'.$row['Email'].'</td>';
                   echo'</tr>'; 
    
    
                   }
    
                   echo '</table>'; 
     ?> 
    <script>
    var table = document.getElementById("table"),rIndex;
    
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                        rIndex = this.rowIndex;
                        console.log(rIndex);
    
                        document.getElementById("id").value = this.cells[0].innerHTML;
                        document.getElementById("username1").value = this.cells[1].innerHTML;
                        document.getElementById("address").value = this.cells[2].innerHTML;
                    };
                }
    
    
               // edit the row
                function editRow()
                {
                    table.rows[rIndex].cells[0].innerHTML = document.getElementById("ID").value;
                    table.rows[rIndex].cells[1].innerHTML = document.getElementById("Name").value;
                    table.rows[rIndex].cells[2].innerHTML = document.getElementById("Email").value;
                }
    
            </script> 
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题