Php 带有对话框按钮的jquery数据表
我试图利用一个按钮，它将根据按钮所在的特定行打开一个对话框。我在下面附上了我的代码 按钮为dlg outletpart btn类： 以下是jquery javascript部分：Php 带有对话框按钮的jquery数据表,php,jquery,datatables,jquery-datatables,filemaker,Php,Jquery,Datatables,Jquery Datatables,Filemaker,我试图利用一个按钮，它将根据按钮所在的特定行打开一个对话框。我在下面附上了我的代码 按钮为dlg outletpart btn类： 以下是jquery javascript部分： <script> /*datatables script function below */ $(document).ready( function () { $('#table_id_outlets').DataTable(); } ); </script> <script> /*
<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>
/*下面的datatables脚本函数*/
$（文档）.ready（函数（）{
$（'table#id_outlets'）.DataTable（）；
} );
/*用于项目详细信息的jquery对话框控件*/
$（函数（）{
$（“.dlgoutletpart”）。对话框({
自动打开：错误，
展示：{
效果：“盲”，
持续时间：500
},
隐藏：{
效果：“褪色”，
持续时间：700
},
});
$（“.dlg outletpart btn”）。单击（函数（）{
var outletID=$（this.attr（“数据dlg outletparts”）；
$（“#dialog-”+outletID）.dialog（“打开”）
});
});
<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>
地板
服务区域
房间号
出口编号
出口气体
插座制造商
出口模型
出口部件
- 保持在缩进级别的顶部
- 缩进不良的代码更难内置，甚至更难排除故障。在StackOverflow或任何其他站点上发布之前，您应该首先清理代码（实际上，您应该按照自己的代码进行）。这可能就是你在我的问题上投反对票和不投赞成票的原因。然而，如果你回去编辑你的答案，把所有的内容都缩进，我会给你的问题投上一票
- 记住：你在网上发布的内容反映了你作为一名程序员的感受
- 不要使用单字母变量。
- 为变量指定正确的描述性名称。单字母名称也使编码和故障排除变得困难
- 如果你不需要它，就不要写它
- 如果您要在StackOverflow上发布请求帮助的消息，这一点尤其正确。如果您有一个else子句，但其中没有任何代码，那么应该从您的问题中删除，并且真正应该从您的代码中删除。如果在一个子句中没有任何任务要执行，那么不要添加它。当你真的需要它的时候，把它加回去。这用于关闭和立即打开php元素。如果要立即打开另一个php元素，那么没有理由关闭一个php元素。如果这是因为你把问题的两个不同部分编织在一起，那么在你提交问题之前先把它们清理干净
- 使表格成为您的主选择器。
- 您可以将
元素作为主选择器，它仍然会为您提供表中tr
的索引，但将选择器添加到表本身意味着，如果您在呈现DOM后以编程方式添加新行，jquery方法也将适用于它们tr
- 您可以将
- 使用
关键字作为起点。this- 这将是单击的按钮，它将允许您四处导航
- 在本例中，利用jquery的导航方法
/*下面是datatables脚本函数*/ $（文档）.ready（函数（）{ $（'table#id_outlets'）.DataTable（）； }); /*用于项目详细信息的jquery对话框控件*/ $（函数（）{ $（“.dlgoutletpart”）。对话框({ 自动打开：错误， 展示：{ 效果：“盲”， 持续时间：500 }, 隐藏：{ 效果：“褪色”， 持续时间：700 }, }); //我将元素选择器更改为table元素的id。 //这允许您指定“on”方法的选择器以应用于所有 //tr元素，然后引用它们的相对索引 //到整个表。 //我使用'button'作为方法的选择器，因为您只有 //表中的on按钮，以便将选择器与类名分离。 $（“#表#id_outlets”）。在（'click'，'button'，function（）上{ 调试器； //此：指已单击的按钮 //最近：沿节点层次结构向上移动，直到找到一个'tr'` //index（）：提供表中'tr'的索引。 //根据需要使用索引号。 log（$（this.closest（'tr'）.index（））； var outletID=$（this.attr（“数据dlg outletparts”）； $（“#dialog-”+outletID）.dialog（“打开”） }); });<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>