如何根据单击的行选择和编辑mysql结果?

时间:2014-04-05 17:20:12

标签: php jquery mysql twitter-bootstrap post

在开始之前,我想解释一下,我知道MySQL和SQL注入的弃用。这纯粹是出于练习目的。

我有一个简单的表,其中包含使用

的mysql数据库的结果
mysql_fetch_assoc();

然后使用While循环在表格中显示结果。 我正在使用Twitter-Bootstrap作为CSS框架,并且还处理了进一步解释的Modals。

这是输出

Table

现在我想要做的是使用编辑按钮触发模态,该按钮将包含表单中特定行的数据。获取模态以触发不是问题,它在模式中显示特定行的数据,具体取决于哪一行单击了编辑按钮。对于Form,将在Modal底部有4个<input>和一个提交按钮来更新数据库中的结果。我很可能会使用$ .POST / Ajax方法而不是php来处理它,因为在模态关闭后不必重新加载页面就可以刷新表格。

我有信心能够更新结果,但它只是根据想要编辑的结果显示“$(this)”的数据。

这是通过单击编辑按钮触发模态的图像。 modal view

我怎么能这样做?

这是我的代码。

<table class="table users table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($row=mysqli_fetch_assoc($result)) { $id=$row['id']; $name=$row['name']; $desc=$row['description']; $quantity=$row['quantity']; $price=$row['price']; echo "<tr id='data-form' >
<td>$id</td>
<td>$name</td>
<td>$desc</td>
<td>$quantity</td>
<td>". '$'. "$price</td>
<td><button href='#Edit' data-toggle='modal' class='btn btn-success'>Edit</button>
</td>
<td><button class='btn btn-danger'>Delete</button>
</td>                                                   
</tr>"; } ?>
    </tbody>
</table>



<div id="Edit" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">×</button>
                    <h3>Edit Item</h3>

            </div>
            <div id="inner-data" class="modal-body">
                <label>Name:</label>
                <input type="text" class="form-control" value="test" id="name">
                <br>
                <label>Description:</label>
                <input type="text" class="form-control" value="test" id="description">
                <br>
                <label>Quantity:</label>
                <input type="text" class="form-control" value="test" id="quantity">
                <br>
                <label>Price:</label>
                <input type="text" class="form-control" value="test" id="price">
                <br>
            </div>
            <div class="modal-footer">  <a data-dismiss="modal" id="updateResults" class="btn btn-primary btn-small" href="#">Save</a>

            </div>
        </div>
    </div>
</div>

0 个答案:

没有答案