<!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?如果您知道解决此问题的最佳方法,请告诉我。
如果您想处理可编辑的表格单元格,您可以将 input type="text" 放在标签内。否则你可以使用引导框架。它提供了您可以从这里轻松找到相关信息。或者您可以查看 bootstrap 4 文档。这是ash blue 的最佳代码笔示例。请参考他的代码
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 用数据填充表。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句