Question

正如我所听到的，我应该避免在html上使用内联javascript处理程序。例如onclick =“FUNCTION_NAME”。

如果我有一个动态生成的表，则每行都有一个自己的按钮。

如果我不使用倾斜Javascript函数，如何将表中的某些参数传递给事件处理程序？
也许从表格单元格传递数据并不是很难。如果某些数据未显示在表格单元格上（出于安全原因），例如，在应用程序内部使用的秘密ID号，并且不应该在html上曝光（在表格中的不可见单元格中设置它），该怎么办？是不安全的，因为知道HTML的人仍然可以检查它）。在这种情况下，如何将表中未显示的数据从动态表传递给事件处理程序？

如果我们在每一行使用内联点击属性，即onclick =“javascript_function（parameter_1，parameter_2）”，那么传递我想要的任何数据都相当容易，而且我不需要在html上显示那些类型的安全数据为了通过它。

Answer 1

如果您使用jQuery，我建议

<table class="with-val">
   <td data-val="17">17 points</td>
</table>

和

$('.with-val').on('click', 'td', function() {
  var val = $(this).data('val');
  console.log(val)       //17
});

这种方式（使用on(eventType, selector, handler)签名），如果删除或添加行，则不必重置事件，并且标记更轻（并且它被认为是最佳实践，因为您只为整个表添加一个事件处理程序。）

Answer 2

给予加价

<td class="val" data-val="17">17 points</td>

你可以从这样的绑定中获得价值：

$('.val').on('click', function() {
    var val = $(this).data('val');
    console.log(val)       //17
});

为此：

在表中的不可见单元格中设置它是不安全的，因为知道HTML的人仍然可以检查它

您不得以任何方式向前端发送安全数据。用户可以使用断点，调试或其他任何东西来停止代码，即使在html中看不到它，也可以获取这些数据。此外，这些数据将在浏览器发送的请求的响应中显示

Answer 3

您可以使用click事件来调用函数，该函数可以获取您希望的任何参数的值。希望这会有所帮助。

<td><button id="btn">Click me</button></td>
<td><input type="hidden" id="secret_id"></td>


$("#btn").click(function(){
   var id = $("#secret_id").val();
   alert(id);
});

Answer 4

这是一个可能的解决方案：

<强> HTML ：

<table border="1">
    <thead>
    <tr>
        <th>HEAD1</th>
        <th>HEAD2</th>
        <th>HEAD3</th>
    </tr>
    </thead>
    <tr>
        <td class="hiddenField">row1 col1</td>
        <td>row1 col2</td>    
        <td><button class="seeHidden">btn1</button></td>
    </tr>
        <tr>
        <td class="hiddenField">row2 col1</td>
        <td>row2 col2</td>
        <td><button class="seeHidden">btn2</button></td>
    </tr>
</table>

<强> CSS ：

th:nth-child(1), td:nth-child(1){
    display: none;
}

<强>的jQuery ：

$(".seeHidden").click(function(){
    var hiddenField = $(this).parent()
                             .siblings("td.hiddenField")
                             .html();
    alert(hiddenField);
});

点击此链接jsfiddle查看一个有效的示例。

希望它有用！

如何在没有内联javascript处理程序的情况下将参数从动态表传递到事件处理程序

4 个答案: