php - 单击按钮时如何将特定 HTML 表行值插入到 MySql 中

Question

当我单击表行中的按钮(更新)时，我有以下带有 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>

Answer 1

使用for循环显示html表格，并在按钮中使用index。

例如，如果您想通过单击旁边的删除按钮从表格中删除 session ，则可以执行以下操作:

示例格式

1. meeting1 DELETE(button)

2. meeting2 DELETE(button)

3. 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>";