javascript 如何在 AJAX 响应表中添加复选框

3hvapo4f 于 2023-03-11 发布在 Java

关注(0)|答案(3)|浏览(156)

//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>

我希望将这个复选框准确地添加到表中，这样我就可以给予客户机选择一些响应数据，然后通过单击按钮（onclick）再次发出新的请求。
棘手的部分，我挣扎着这是我想得到的电子邮件地址选定的复选框存储在一个变量/数组变量

JavaScript

来源：https://stackoverflow.com/questions/52129563/how-to-append-check-box-inside-a-table-of-ajax-response

3条答案

按热度按时间

c3frrgcw1#

假设我有如下响应数据
呃...不。因为我觉得这是你的问题。
否则，答案就是：获取生成这种格式错误的“响应”的服务器脚本并修复它。
所以我修改了很多，给你们看一个可行的例子。
正如评论中提到的，作为起点的response声明是无效的。我以“常见”的方式构造了它...这是一个包含对象数组的对象。
对象有属性名......你特灵在jQuery追加中引用它们。所以我添加了它们。
然后，在append中，你把复选框放在tr的外面......这不好。我把它放在name单元格中......但是我更愿意为它添加一个表列。你来决定。
要追加字符串上也有一些引号问题。

$("#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>

赞(0）回复(0）举报 2023-03-11

vcirk6k62#

假设您的回答是以下格式：

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' 
  }
];

创建所需内容的另一种更易于阅读的方法是：

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);
});

你的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
然后你可以得到这样的检查用户的电子邮件：

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

赞(0）回复(0）举报 2023-03-11

kiz8lqtg3#

删除type=“checkbox”的双引号
它导致了语法错误uncaught错误为我.
改为尝试类型=复选框

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 如何在 AJAX 响应表中添加复选框

3条答案

相关问题

热门标签

最新问答