我正在尝试使用一个按钮，该按钮将根据按钮所在的特定行打开一个对话框。我已在下面附上我的代码。
按钮的类是dlg-outletpart-btn：
这是jquery javascript部分：
<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
} );
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},
});
$( ".dlg-outletpart-btn" ).click(function() {
var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>
这是带有php的html：
<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php
session_start();
require_once('./includes/php/include_master.php');
if ($_SESSION['authenticated'] == "true") {
$id_account = $_SESSION['ID_Account'];
$q = $protoFM['EMGSV'] -> newFindCommand('web_outlets');
$q -> addFindCriterion('id_account', '=='.$id_account);
$r = $q->execute();
if(FileMaker::isError($r)){
if($r->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$r->code;
}
}else{
}
} else {
echo "You are not logged in.";
}
?>
<?php
foreach ($r->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');
echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
echo '1. '.$outletPart1.'<br>';
echo '2. '.$outletPart2.'<br>';
echo '3. '.$outletPart3.'<br>';
echo '4. '.$outletPart4.'<br>';
echo '5. '.$outletPart5.'<br>';
echo '6. '.$outletPart6.'<br>';
echo '7. '.$outletPart7.'<br>';
echo '8. '.$outletPart8.'<br>';
echo '9. '.$outletPart9.'<br>';
echo '10. '.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($r->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');
echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>
</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
答案 0 :(得分：0)
我没有尝试对此进行测试，并且需要进行批次清理，因此请使用一粒盐而不是确切的解决方案。
在我进入解释之前，需要提出几点：
我不想以责骂的方式离开，但说实话，如果你将格式错误和编写的代码发布到StackOverflow，没有人会回答它，你就会打算投票。通过格式化代码，你几乎让我失去了一部分，但我还是决定完成它。
所以，这是您可以尝试的代码。专注于我在javascript中评论的部分。基本思路是：
tr元素设置为主选择器，它仍然会为您提供表中tr的索引，但将选择器添加到表本身意味着您是否以编程方式添加新行在渲染DOM之后，jquery方法也适用于它们。this关键字作为起点。
利用jquery的导航方法，在本例中为closest()。
<html>
<head>
<script> /*datatables script function below */
$(document).ready( function () {
$('#table_id_outlets').DataTable();
});
</script>
<script> /*jquery dialog controls for project detail */
$(function() {
$( ".dlgoutletpart" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "fade",
duration: 700
},
});
// I changed the element selector to the id of the table element.
// This allows you to specify the selector for the 'on' method to apply to all
// tr elements within the given table and then reference their index relative
// to the overall table.
// I'm using `button` for the method's selector because you have only have
// on button in your table so it de-couples your selector from your class name.
$( "#table_id_outlets" ).on('click', 'button', function() {
debugger;
// this: refers to the button that was clicked
// closest: walks up the node hierarchy till it finds a `tr`
// index(): gives you the index of the `tr` within the table.
// Use the index number however you need.
console.log($(this).closest('tr').index());
var outletID = $(this).attr("data-dlg-outletparts");
$( "#dialog-" + outletID ).dialog( "open" )
});
});
</script>
</head>
<body>
<div>
<p>
<a href="login.php" target="_self"> <h3>Go Back to main page</h3> </a>
</p>
</div>
<div>
<?php
session_start();
require_once('./includes/php/include_master.php');
if ($_SESSION['authenticated'] == "true") {
$id_account = $_SESSION['ID_Account'];
// Note: you can't put a space between your
$query = $protoFM['EMGSV']->newFindCommand('web_outlets');
$query->addFindCriterion('id_account', '==' . $id_account);
$result = $query->execute();
if(FileMaker::isError($result)){
if($result->code == 401){
echo "No outlets found.";
}else{
echo "Unknown Error:".$result->code;
}
}
} else {
echo "You are not logged in.";
}
foreach ($result->getRecords() as $parts){
$outletID = $parts->getField('ID_Outlet');
$outletData1 = $parts->getField('Image_Data');
$outletData2 = $parts->getField('Image_Data2');
$outletData3 = $parts->getField('Image_Data3');
$outletPart1 = $parts->getField('part1');
$outletPart2 = $parts->getField('part2');
$outletPart3 = $parts->getField('part3');
$outletPart4 = $parts->getField('part4');
$outletPart5 = $parts->getField('part5');
$outletPart6 = $parts->getField('part6');
$outletPart7 = $parts->getField('part7');
$outletPart8 = $parts->getField('part8');
$outletPart9 = $parts->getField('part9');
$outletPart10 = $parts->getField('part10');
echo '<div class="dlgoutletpart" id="dialog-' .$outletParts. '" title="Outlet Parts for '.$outletID.'">';
echo '<p>';
// Use an unordered list here
echo '1. '.$outletPart1.'<br>';
echo '2. '.$outletPart2.'<br>';
echo '3. '.$outletPart3.'<br>';
echo '4. '.$outletPart4.'<br>';
echo '5. '.$outletPart5.'<br>';
echo '6. '.$outletPart6.'<br>';
echo '7. '.$outletPart7.'<br>';
echo '8. '.$outletPart8.'<br>';
echo '9. '.$outletPart9.'<br>';
echo '10. '.$outletPart10.'<br>';
echo '</p>';
echo '</div>';
}
?>
<table id="table_id_outlets" class="display">
<thead>
<tr>
<th>Floor</th>
<th>Area Served</th>
<th>Room Number</th>
<th>Outlet Number</th>
<th>Outlet Gas</th>
<th>Outlet Manufacturer</th>
<th>Outlet Model</th>
<th>Outlet Parts</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result->getRecords() as $outlet){
$outletFloor = $outlet->getField('Outet_Floor');
$outletAreaServed = $outlet->getField('Outlet_Area_Served');
$outletRoomNumber = $outlet->getField('Outet_Room_Number');
$outletNumber = $outlet->getField('Outlet_Number_In_Room');
$outletGas = $outlet->getField('Outlet_Gas_Type');
$outletManufacturer = $outlet->getField('Outlet_Manufacturer');
$outletModel = $outlet->getField('Outlet_Model');
echo "<tr>";
echo '<td>' .$outletFloor. '</td>';
echo '<td>' .$outletAreaServed. '</td>';
echo '<td>' .$outletRoomNumber. '</td>';
echo '<td>' .$outletNumber. '</td>';
echo '<td>' .$outletGas. '</td>';
echo '<td>' .$outletManufacturer. '</td>';
echo '<td>' .$outletModel. '</td>';
echo '<td> <button class="dlg-outletpart-btn" data-dlg-outletparts="'.$outletParts.'">Outlet Parts</button>';
}
?>
</tbody>
</table>
</div>
<?php $outlet->getfields('Outlet_Room_Number')?>
</body>
</html>
我没有测试php部分，但jquery绝对有效。