这是我的表格代码。我想在按下按钮" EDIT"时获得打开模态中每行的ID。如何将所选行的ID发送到模态?在我的情况下,我只得到第一行ID。
感谢您的关注。
JS用于模态形式
<script>
$(".btn[data-target='#myModal']").click(function() {
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
</script>
&#13;
<table class="simple-little-table table" cellspacing='0'>
<tr>
<th><p>№</p></th>
<th><p>Name, Surname</p></th>
<th>Own number</th>
<th>Company Number</th>
</tr>
<?php
$result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
$id=$row["0"];
echo '<tr>
<td><p>'.$row[1].' '.$row[2].'</p></td>
<td><p>'.$row[4].'</p></td>
<td><p>'.$row[5].'</p></td>';
?>
<td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID-->
<h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>
</div>
<div class="modal-body"> sadasdas</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php
}
?>
答案 0 :(得分:1)
function getValue(id){
$('#myModalLabel').text(id);
$('#myModal').modal('show');
}
并在按钮点击时调用此功能 而不是使用这个
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">
使用
<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">
答案 1 :(得分:1)
这是你可以做的。我没有使用您的数据,但假设您有足够的理解根据您的需要使用它。 基本上我只是在使用技巧。
<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>
你会得到类似的东西
<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>
<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>
现在使用这个jquery
$('.myclass').click(function(){
var btn_id = $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});
答案 2 :(得分:1)
你不应该为每一行创建模态的html,而是创建一个模态,在每一行被点击时都会使用它。 然后,在click方法中使用jquery,您可以为模态设置不同的字段,例如id或其他内容,例如:
$("btn").click(function(event) {
id = event.target.id;
$(#myModalIdField).text = id;
});
答案 3 :(得分:0)
使用此:
首先,给表id="name"
,
使用您自己的表和数据,如果您使用数据库或普通表;
将模式按钮用作-
<table id="table">
<thead>
<tr>
<th>Your data </th>
</thead>
<tbody>
<tr>
<td>Your Data </td>
<td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
<div class=" modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="myModalLabel">
<h4 class="modal-title">Enter Remarks:</h4>
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="comment">Remarks:</label>
<textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" name="msub" id="" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</button>
</td>
</tr>
</tbody>
</table>
使用此jquery:
var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function getValue(rindex) {
rindex = this.rowIndex;
$('#myModalLabel').text(rindex);
$('#myModal').modal('show');
}
}