当我单击表行中的按钮(更新)时，我有以下带有 HTML 的表，特定的行值(即按钮属于受尊重的行值仅在表中插入或更新的行)。
<script type = "text/javascript" >
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
<script type = "text/javascript" >
history.pushState(null, null, 'new2.html');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'new2.html');
});
</script>
<style>
<script>
$(function() {
var pickers = {};
$('table tr').editable({
dropdowns: {
Aex: ['Automation', 'Manual']
},
edit: function(values) {
$(".edit i", this)
.removeClass('fa-pencil')
.addClass('fa-save')
.attr('title', 'Save');
pickers[this] = new Pikaday({
field: $("td[data-field=birthday] input", this)[0],
format: 'MMM D, YYYY'
});
},
save: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
},
cancel: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
}
});
});
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> body {
margin-bottom: 100px;
}
.row {
margin-bottom: 20px;
}
pre {
margin-top: 0;
}
.button.button-small {
height: 30px;
line-height: 30px;
padding: 0px 10px;
}
td input[type=text], td select {
width: 100%;
height: 30px;
margin: 0;
padding: 2px 8px;
}
th:last-child {
text-align: right;
}
td:last-child {
text-align: right;
}
td:last-child .button {
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
background-color: #FFF;
}
td:last-child .button .fa {
line-height: 30px;
width: 30px;
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
color: #fff;
padding: 100px 55px;
font-family: Montserrat, sans-serif;
height:500px;
background-image: url(header.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #0099ff;
font-size: 50px;
}
.logo-small1 {
color: #0099ff;
font-size: 20px;
}
.logo {
color: #0099ff;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
#section {
width:350px;
padding:10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #39ac73;
}
.carousel-indicators li {
border-color: #39ac73;
}
.carousel-indicators li.active {
background-color: #39ac73;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #39ac73;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #39ac73;
background-color: #fff !important;
color: #39ac73;
}
.panel-heading {
color: #fff !important;
background-color: #39ac73 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #39ac73;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
min-height: 70px;
}
.navbar li a, .navbar .navbar-brand {
color: #39ac73 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #39ac73 !important;
background-color: #e5fff7 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #39ac73;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}<html lang="en">
<head>
<meta charset="utf-8">
<title>Windows</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="http://code.jquery.com/jquery-1.11.3.min.js" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="css/pikaday.css" >
<link rel="stylesheet" href="css/pikaday-skeleton.css" >
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="container-fluid text-center">
<h1>Windows Data</h1>
<table id="tab_logic" class="table">
<thead >
<tr class="info">
<th>S.No</th>
<th>Machine Name</th>
<th>IP</th>
<th>Host name</th>
<th>Tester Name</th>
<th>Installation Plan</th>
<th>OS Version</th>
<th>MI Version</th>
<th>AUT/MAT</th>
<th>Reimage</th>
<th>Edit</th>
<th>Update</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="1">
<td id="sn" data-field="S.No">1</td>
<td data-field="Machine Name">sxsxsdsd</td>
<td data-field="IP">sssss</td>
<td data-field="Host name">zxzxzx</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td><a class="button button-small edit" title="Edit"><i class="fa fa-pencil"></i></a></td>
<td><button type="submit" onclick="one()" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td ><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="2">
<td data-field="S.No">2</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsdsd</td>
<td data-field="Host name">sdsdsdsdsd</td>
<td data-field="Tester Name">dsdsdsdsd</td>
<td data-field="Installation Plan">[ For OLS ] MI PC offline</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="3">
<td data-field="S.No">3</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsd</td>
<td data-field="Host name">sdsdsdsd</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="Pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
</body>
</html>最佳答案
使用for循环显示html表格，并在按钮中使用index。
例如，如果您想通过单击旁边的删除按钮从表格中删除 session ，则可以执行以下操作:
示例格式
meeting1 DELETE(button)
meeting2 DELETE(button)
meeting3 DELETE(button)
删除按钮将相同，只是网址会更改。
echo "<tr>
<th>Status</th>
<th>Title</th>
<th>Scheduled By</th>
<th>Scheduled Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Actions</th>
</tr>";
for ($n = 0; $n < count($meeting_array); $n++) {
$meetingname = $meeting_array[$n]; //contains meeting names.
echo "<td style= \"color : darkgoldenrod; text : strong;\" >" . $status . "</td>";
echo "<td>" . $meetingname2 . "</td>";
echo "<td>" . $extractedname . "</td>";
echo "<td>" . $mydate . "</td>";
echo "<td>" . $mystarttime . "</td>";
echo "<td>" . $myendtime . "</td>";
echo"<td>";
// pass meeting name in url.
echo"<a href=\"View_Meeting.php?id={$meetingname}\" <img src=\"../img/read1.png\" alt=\"Read\" /> ";
echo "</td>";
}
echo "</tr>";
关于php - 单击按钮时如何将特定 HTML 表行值插入到 MySql 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35402165/