Question

我有一个HTML表格，表格的最后一列是＆＃34;详细信息＆＃34;目前，我会通过内容显示提醒。这很好但很难看。我知道JQuery对话框，但我似乎无法将消息传递给它。我想知道是否有更好的方式来显示像alert一样的内容。

代码：

<tr>
  <td>{{date}}</td>
  <td>{{item_name}}</td>
  <td>{{type}}</td>
  <td>{{points}}</td>
  <td>{{item_options}}</td>
  <td><button onclick="detailer('{{other}}')">Details</button></td>
</tr>

<script>
  function detailer(pii_other){
    alert(pii_other);
}
</script>

Answer 1

在按钮中添加data- *属性，如下所示，并将控件传递给函数：

<td><button data-info='some-info' onclick="detailer('{{other}}',this)">Details</button></td>

然后在您的函数中检索特定控件的data属性，如下所示：

<script>
  function detailer(pii_other, ctrl){
    var info = $(ctrl).data('info');
    alert(pii_other + ' ' + info);
}
</script>

编辑 - 好的，让我们顺其自然

<td><button data-info='some-info' id="opener">Details</button></td>

<div id="dialog" title="Basic dialog">
  <p></p>
</div>

您将按如下方式初始化对话框：

$(function() {
    $("#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      $("#dialog p").text($(this).data("info")); //Here your dialog will get info from the button you clicked everytime!!
    });
});

Answer 2

我不熟悉jinja，但你可以把它放在jquery对话框标记中

<div id="dialogContent"></div>

给按钮一个id

<button id="myButton"></button>

并举办类似

的活动

$("#myButton").click(function() { $("#dialogContent").html([CONTENT GOES HERE]); });

然后您的按钮中不再需要onclick。

JQuery UI显示消息类似警报

2 个答案: