如何在Ajax响应表中附加复选框

Question

 //assume I have the response data as follows: var response[] = { blake,blake@gmail.com,fofehu45555,ontario,toronto }, {flake,flake@gmail.com,kokehu45555,ontario,toronto}; for(i=0; i<response.data.length; i++){ $("#table").append('<input type="checkbox"'"<tr class='tr'> <td> "+response.data[i].user_name+" </td> <td> "+response.data[i].userr_contact+" </td> <td> "+response.data[i].user_license+" </td> <td> "+response.data[i].userr_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);}

 <button onclick="myfunction();">Go</button> <table id="table" border=1> <tr> <th> Name </th> <th> contact </th> <th> license </th> <th> email </th> <th> state </th> <th> city </th> </tr> </table>

I want to append this checkbox inside the table accurately, so that I can give the permission to the client to select few of the response data and give a new request again by the click of a button (onclick). 我想将此复选框准确地附加到表中，以便我可以授予客户端选择少量响应数据并通过单击按钮（onclick）再次发出新请求的权限。

The tricky part that im struggling with this is i want to get the email address of the selected checkboxes stored in a variable/ array variable 我为此苦苦挣扎的棘手部分是我想获取存储在变量/数组变量中的所选复选框的电子邮件地址

Answer 1

Assume I have the response data as follows 假设我有如下响应数据

Hew... No. Because I feel that this is your issue. w ...不。因为我觉得这是您的问题。
Else, the answer is: Get the server script that is producing such a malformed "response" and fix it. 否则，答案是：获取产生这种格式错误的“响应”的服务器脚本并进行修复。

So I reworked a lot in there, to show you a working example. 因此，我在那里做了很多工作，向您展示了一个可行的示例。

As mentionned in comments, the response declaration, which is the starting point, is invalid. 如评论中所述，作为起点的response声明无效。 I structured it in a "commonly seen" way... Which is an object containint an array of objects. 我以一种“常见”的方式构造了它……这是一个包含对象数组的对象。

Objects have propety names... Which you were tring to refer to in the jQuery append. 对象具有专有名称...您正试图在jQuery附录中引用该名称。 So I added them. 所以我加了他们。

Then, in the append, you placed the checkbox outside the tr ... That's not good. 然后，在附录中，将复选框放置在tr之外。这不好。 I placed it in the name cell... But I would prefer to add a table colunm for it. 我将其放置在名称单元中...但是我希望为其添加一个表列。 You to decide. 你来决定。

You also had some quotes issue on that string to append. 您还对该字符串附加了一些引号问题。

 $("#goBtn").on("click",function(){ //assume I have the response data as follows: var response = { data:[ { user_name: "blake", user_email: "blake@gmail.com", user_contact: "fofehu45555", state: "ontario", city: "toronto", user_license: "" }, { user_name: "flake", user_email: "flake@gmail.com", user_contact: "kokehu45555", state: "ontario", city: "toronto", user_license: "" } ] }; for(i=0; i<response.data.length; i++){ $("#table").append("<tr class='tr'> <td> <input type='checkbox'> "+response.data[i].user_name+" </td> <td> "+response.data[i].user_contact+" </td> <td> "+response.data[i].user_license+" </td> <td> "+response.data[i].user_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="goBtn">Go</button> <table id="table" border=1> <tr> <th> Name </th> <th> contact </th> <th> license </th> <th> email </th> <th> state </th> <th> city </th> </tr> </table>

Answer 2

Supposing your response is in this format: 假设您的回复采用以下格式：

var response = [
  { 
    user_name: 'blake',
    user_email: 'blake@gmail.com',
    user_licence: 'fofehu45555',
    user_state: 'ontario',
    user_city: 'toronto' 
  },
  { 
    user_name: 'flake',
    user_email: 'flake@gmail.com',
    user_licence: 'kokehu45555',
    user_state: 'ontario',
    user_city: 'toronto' 
  }
];

one more readable way to create what you want is: 创建所需内容的另一种可读方式是：

response.forEach(function(user) {
    var tr = $('<tr/>');
    var nameTd = $('<td/>', {text: user.user_name});
    var checkbox = $('<input />', { type: 'checkbox', value: user.user_email }).prependTo(nameTd);
    nameTd.appendTo(tr);
    var contactTd = $('<td/>', {text: user.user_contact}).appendTo(tr);
    var licenceTd = $('<td/>', {text: user.user_licence}).appendTo(tr);
    var emailTd = $('<td/>', {text: user.user_email}).appendTo(tr);
    var stateTd = $('<td/>', {text: user.user_state}).appendTo(tr);
    var cityTd = $('<td/>', {text: user.user_city}).appendTo(tr);
    $('table tbody').append(tr);
});

You html should look something like this: 您的html应该看起来像这样：

<html>
  <body>
    <table>
      <thead>
        <tr>
           <th> Name </th>
           <th> contact </th>
           <th> license </th>
           <th> email </th>
           <th> state </th>
           <th> city </th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </body>
</html>

JSFiddle 的jsfiddle

Then you can get the checked users' emails like this: 然后，您可以像下面这样查看被检查用户的电子邮件：

var selected = $('input:checkbox:checked');
var emails = [];
selected.each(function(){
    emails.push($(this).val());
});

如何在Ajax响应表中附加复选框

问题描述

2 个解决方案

解决方案1
1 2018-09-01 16:40:43

解决方案2
0 已采纳 2018-09-01 16:48:34

如何在Ajax响应表中附加复选框

问题描述

2 个解决方案

解决方案1 1 2018-09-01 16:40:43

解决方案2 0 已采纳 2018-09-01 16:48:34

解决方案1
1 2018-09-01 16:40:43

解决方案2
0 已采纳 2018-09-01 16:48:34