Question

我的代码：

for (var i = 0; i < arr.length; i++) {
  $("#myfav").append("<tr><td>" + "<a href='#' class='ui-btn' style='background-color:white;color:#03d3aa;' onClick='window.onclick= prepareButton()'>" + arr[i].username + "<br>" + arr[i].phoneno + "<br>" + "Status: " + arr[i].status + "</a></td></tr>");
}

function prepareButton() {

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dialog" title="Basic dialog" style="display:none;background-color:white;">
  <a href="#" onclick="add()" class="ui-btn">Add as Loved Ones</a>
  <a href="#" onclick="view()" class="ui-btn">View Profile</a>
</div>

现在我有一个联系人列表，当点击时会运行功能prepareButton()，这将显示一个带按钮的对话框。

我需要点击联系人的arr[i].username和arr[i].phoneno的值，以便将此值传递给add()按钮并通过AJAX将其保存在我的数据库中。

但是，我似乎无法获得这两个值，因为它使用Javascript以表格格式附加。

谢谢！

Answer 1

您可以将参数添加到prepareButton函数中，当您向表中追加行时，请确保使用提供的参数调用该函数。就像你展示它们的方式一样：

for (var i = 0; i < arr.length; i++) {
  $("#myfav").append("<tr><td>" + "<a href='#' class='ui-btn' style='background-color:white;color:#03d3aa;' onClick='window.onclick= prepareButton(\'"+arr[i].username+"\', \'"+ arr[i].phoneno+"\')'>" + arr[i].username + "<br>" + arr[i].phoneno + "<br>" + "Status: " + arr[i].status + "</a></td></tr>");
}

function prepareButton(username, phoneno) {

  $(function() {
    $("#dialog").dialog({
      autoOpen: true,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
  });
}

我没有运行代码。

Answer 2

如评论所述，您所要做的就是获取文本和拆分值，但由于字符串解析不好，您应该尝试将<br>替换为<p>作为默认的块元素。< / p>

另外，您应该避免分配onclick=someFunc()。您已经在使用jQuery了。使用$(selector).on('click', ...)

示例代码

＆＃13;

function getRowHTML(user) {
  return "" +
    "<tr>" +
      "<td>" +
        "<a href='#' class='ui-btn userDetails'>" +
          "<p>" + user.username + "</p>" +
          "<p>" + user.phoneno + "</p>" +
          "<p>" + "Status: " + user.status + "</p>" +
        "</a>" +
      "</td>" +
    "</tr>"
}

function createHTML(arr) {
  var htmlStr = arr.reduce(function(p, c) {
    p += getRowHTML(c);
    return p;
  }, "");
  $("#myfav").append(htmlStr);

  //for (var i = 0; i < arr.length; i++) {
  //  $("#myfav").append(getRowHTML(arr[i]));
  //}
}

function registerEvents() {
  $(document).on("click", ".userDetails", function() {
    var paras = $(this).find('p');
    var data = $.map(paras, function(el) {
      return $(el).text()
    });
    console.log(data)
    return false;
  })
}

function prepareButton() {
  $("#dialog").dialog({
    autoOpen: true,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
}

$(function() {
  var data = [{
    username: "foo",
    phoneno: "12345678",
    status: "test"
  }, {
    username: "foo1",
    phoneno: "12345",
    status: "test1"
  }, {
    username: "foo2",
    phoneno: "123458",
    status: "test2"
  }, {
    username: "foo3",
    phoneno: "123678",
    status: "test3"
  }]

  createHTML(data)
  registerEvents();
})

＆＃13;

.userDetails {
  background-color: white;
  color: #03d3aa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myfav"></table>
<div id="dialog" title="Basic dialog" style="display:none;background-color:white;">
  <a href="#" onclick="add()" class="ui-btn">Add as Loved Ones</a>
  <a href="#" onclick="view()" class="ui-btn">View Profile</a>
</div>

＆＃13;

注意：我没有更改onclick="add()"或="view()"的部分内容。

如何从javascript中附加的表中获取值

2 个答案:

示例代码