Question

<!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>

请帮助我，我想编辑此表中的行，但我不知道该怎么做。谢谢！也许我应该创建另一个php文件进行编辑或使用javascript？让我知道您是否知道解决此问题的最佳方法。

Answer 1

如果要处理可编辑的表格单元，可以将输入type =“ text”放在标记内。否则，您可以使用引导框架。它提供您可以从here轻松找到有关此内容。或者您可以查看bootstrap 4文档。这是灰蓝色的最佳codepen示例。请参考他的代码

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>

因此，您必须使用这些以及php来再次上传已编辑的单元格。请记住，您需要使用php来填充数据。

Answer 2

我发现了一种可能性，但是每次尝试编辑该行时，程序都会使用编辑后的行创建一个新行。

  <?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>

如何在php中添加编辑按钮

2 个答案: