jquery与对话框按钮的数据表

-1

我想利用一个按钮，将打开一个对话框基于该按钮位于特定的行。我已附加我的代码如下。jquery与对话框按钮的数据表

该按钮类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. &nbsp;'.$outletPart1.'<br>'; 
     echo '2. &nbsp;'.$outletPart2.'<br>'; 
     echo '3. &nbsp;'.$outletPart3.'<br>'; 
     echo '4. &nbsp;'.$outletPart4.'<br>'; 
     echo '5. &nbsp;'.$outletPart5.'<br>'; 
     echo '6. &nbsp;'.$outletPart6.'<br>'; 
     echo '7. &nbsp;'.$outletPart7.'<br>'; 
     echo '8. &nbsp;'.$outletPart8.'<br>'; 
     echo '9. &nbsp;'.$outletPart9.'<br>'; 
     echo '10. &nbsp;'.$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>

来源

2015-01-27 caryd12

我没有”试着测试这个，并且有一个很多的清理需要所以采取这一粒盐，而不是确切的解决方案。

在我进入的解释，有需要作出一些意见：

留在你的缩进级别的顶部
- 不佳缩进代码更难打造甚至更难以排除故障。在您发布StackOverflow或任何其他网站之前，您应该首先清理您的代码（实际上，您应该在编码时执行此操作）。这可能是你得到了投票的原因，也是你对我的问题没有得到满意的原因。然而，如果你回去编辑你的答案，正确地缩进一切，我会给你的问题upvote。
- 请记住：你在网上发布的内容反映了你作为一名程序员。
请勿使用单个字母变量。
- 给你的变量适当的和描述性的名字。单个字母的名字也使得难以编码和难以排除故障。
如果你不需要它，不写它
- 如果你要张贴在计算器上寻求帮助，这是尤其如此。你有一个没有任何代码的条款的地方应该被剥离你的问题，真的应该被剥离出你的代码。如果您没有任何要在子句中执行的任务，请不要添加它。添加它回来时，你实际上需要它。这用于关闭并立即打开php元素。如果你打算立即打开另一个php元素，那么没有理由关闭一个php元素。如果这是因为您将两个不同的部分针对该问题编织在一起，然后在提交之前将其清理干净。

我不想摘下来的骂，但说实话，如果你交的格式化并写入代码，计算器没有人会回答它，你会得到下降票甚少。你通过格式化代码几乎让我失去了一部分，但我决定完成它。

所以，这里是你可以尝试的代码。关注我在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. &nbsp;'.$outletPart1.'<br>'; 
     echo '2. &nbsp;'.$outletPart2.'<br>'; 
     echo '3. &nbsp;'.$outletPart3.'<br>'; 
     echo '4. &nbsp;'.$outletPart4.'<br>'; 
     echo '5. &nbsp;'.$outletPart5.'<br>'; 
     echo '6. &nbsp;'.$outletPart6.'<br>'; 
     echo '7. &nbsp;'.$outletPart7.'<br>'; 
     echo '8. &nbsp;'.$outletPart8.'<br>'; 
     echo '9. &nbsp;'.$outletPart9.'<br>'; 
     echo '10. &nbsp;'.$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的肯定能行。

来源

2015-01-29 00:54:22

jquery与对话框按钮的数据表

回答

相关问题