Question

我一直致力于使用jquery创建HTML表格的功能，该表格将在页面加载时动态显示帐户列表，这是我毫无问题地实现的。

但是，我还要求向每一行添加一个“onclick”事件，将我重定向到另一个网页，但这取决于我需要传递的参数。这是我的代码：

$(document).ready(function() {
            var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
            var message = 'No accounts found';

            if (x.length > 0) {
                message = 'Select an account to display the rewards information: ';
            }

            $('#message').text(message);

            var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';

            for (var i = 0; i < x.length; i++) {
                tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage()">' + x[i] + '</td></tr>';
            }

            tableContentHtml += '</tbody></table>';
            $(tableContentHtml).appendTo('#container');
        });

        function goAnotherWebPage(account) {
            //do some logic here
        }

方法“goAnotherWebPage”应该收到正在显示的相同帐户ID，我没有问题，当我在表创建时传递x [i]作为参数时出现问题：

onclick="goAnotherWebPage(x[i])"

这不起作用，它表示该帐户未定义。

为了达到这个目的，有人可以给我一些提示或提供帮助吗？提前谢谢！

Answer 1

试试这个

for (var i = 0; i < x.length; i++) {
  tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>';
}

$(document).ready(function() {
  var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
  var message = 'No accounts found';

  if (x.length > 0) {
    message = 'Select an account to display the rewards information: ';
  }

  $('#message').text(message);
  var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';

  for (var i = 0; i < x.length; i++) {
    tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>';
  }

  tableContentHtml += '</tbody></table>';
  $(tableContentHtml).appendTo('#container');

  goAnotherWebPage = function(account) {
    console.log(account);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="container"></div>

希望这会对你有所帮助。

Answer 2

我试着了解你需要什么，然后为你创建一个简单的演示

$(document).ready(function() {
            var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
            var message = 'No accounts found';

            if (x.length > 0) {
                message = 'Select an account to display the rewards information: ';
            }

            $('#message').text(message);

            var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';

            for (var i = 0; i < x.length; i++) {
                tableContentHtml += '<tr><td class="text-left redirect">' + x[i] + '</td></tr>';
            }

            tableContentHtml += '</tbody></table>';
            $(tableContentHtml).appendTo('#container');
        });

    $('body').on('click', '.redirect', function (e) {
      value = $(this).html();
      console.log(value);
      // do your logic here
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="container"></div>

将onclick事件添加到动态生成的表

2 个答案: