在javascript按钮中添加功能[重复]

Question

This question already has an answer here:

• Javascript append to onClick event 2 answers

I want my btn-post-announcement to have a function that is when I click the Post button the data's in the table will be inserted in the database.

<div id='donor_table'>

    <div style='height: 600px; width: 100%; overflow: scroll'>

        <table id='donor_tbl' border='5' cellpadding='10'>
            <thead>
            <th>#</th>
            <th>Announcements</th>
            <th>Date</th>
            <th>Time</th>
            <th>Post</th>
            </thead>
            <tbody>

            <?php
            include "connection.php";
            error_reporting(0);
            $searchannouncement = $_POST['searchannouncement'];
            $displayAnn = " SELECT annid,announcement,dateee,timeee FROM announcements_tbl WHERE annid LIKE '%" . $searchdonor . "%' OR announcement LIKE '%" . $searchdonor . "%' OR dateee LIKE '%" . $searchdonor . "%' OR timeee LIKE '%" . $searchdonor . "%' order by annid desc";

            $annData = mysql_query($displayAnn);
            while ($drecords = mysql_fetch_assoc($annData)) {
                echo "<tr><td>" . $drecords['annid'] . "</td>";
                echo "<td>" . $drecords['announcement'] . "</td>";
                echo "<td>" . $drecords['dateee'] . "</td>";
                echo "<td>" . $drecords['timeee'] . "</td>";
                echo "<td align='center'><input type='button' class='btn-post-announcement button' id=" . $drecords['annid'] . " value='Post'></td>";
            };
            ?>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
<div id="dlg">
    <div>
        <script type="text/javascript">
            $(function () {
                $("#dlg").dialog({
                    autoOpen: false,
                    height: 600,
                    width: 780,
                    modal: true
                });
                $(".btn-post-announcement").button();
                $(".btn-post-announcement").click(function () {
                })
                $("#donor_tbl").DataTable();
            });
        </script>

</div>

Answer 1

You will need ajax to achieve this. I will use Jquery to do so:

JS

$(function(){
  $('.btn-post-announcement').click(function(){ // on button pressed
    var data = {};
    var count = 0;
   $('td').each(function(){        // for each td 
     data[count++] = $(this).text(); // collect the text inside it
   })
    $.post("url.php", data, function(resp){ // send the collected data to the PHP 
       console.log(response)
    })
  })
})

url.php

<?php
 var_dump($_POST);