Question

我有一张桌子，当我点击一行时，<TR>元素正在分配一个类＆＃34;选择＆＃34;。现在我想捕获该行的第一个<TD>元素的内容（因为它是一个ID）并执行Ajax请求，响应将用于填充表格旁边的表单。

我无法在onClick html元素中编写<TR>事件，因为该表是由其他来源生成的，但我可以看到该类在点击时添加和删除一排。所以我需要把它放在表格html之外。

我使用Codeigniter作为PHP框架，但我是jquery ajax函数的新手。谢谢你的帮助......

＆＃13;

$("#testTable tr").click(function() {
  $(this).addClass("select");
});



$("button").click(function() {
  $.ajax({
    url: './getMyData.php',
    method: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    success: function(result) {
      $("#div1").html(result);
    }
  });
});

＆＃13;

#testTable tr {
  margin: 4px;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;
}

.blue {
  color: blue;
}

.select {
  background: yellow;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="margin-top:10px;">
  <div class="col-lg-12">
    <table class="table table-sm table-hover table-stripe" id="testTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>234</td>
          <td>Team 1</td>
          <td>2017-06-14</td>
        </tr>
        <tr>
          <td>254</td>
          <td>Team 2</td>
          <td>2017-06-14</td>
        </tr>
        <tr>
          <td>834</td>
          <td>Team 4</td>
          <td>2017-06-14</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-12">
    <div class="form-group row">
      <label for="example-text-input" class="col-2 col-form-label">Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="Name from Ajaxcall" id="example-text-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-text-input" class="col-2 col-form-label">ID</label>
      <div class="col-10">
        <input class="form-control" type="text" value="ID from Ajaxcall" id="example-text-input">
      </div>
    </div>
    <div class="form-group row">
      <label for="example-text-input" class="col-2 col-form-label">Date</label>
      <div class="col-10">
        <input class="form-control" type="text" value="Date from Ajaxcall" id="example-text-input">
      </div>
    </div>
  </div>

＆＃13;

解决

CI控制器返回一个数组而不是一个对象，我无法使用以下建议的代码。

我改变了我的CI模型，如下所示：

public function get_detail($id){
header('Content-Type: application/json');
$sql = $this->db->query("select * from table where table_id=$id")->result();

$resultDetail = array();
foreach ($sql as $row){
$resultDetail[] = $row;
}        
echo json_encode($resultDetail);

}

这返回了一个准备好的json对象，我可以选择每个单独的项目。

Answer 1

这应该可以正常工作：

$("#testTable").on('click','tr',function() {
          var id = $(this).find("td:first-child").text();
          console.log(id);
          $(this).toggleClass("select");
$.ajax({
    url: './getMyData.php',
    method: 'POST',
    data: { id : id },
    success: function(result) {
      var jsondata = $.parseJSON(result);
       $("#name").val(jsondata.name);
       $("#uid").val(jsondata.id)
       $("#data").val(jsondata.date)
    }
  });



        });

关于js绑定的动态生成内容效果最佳。

Answer 2

你可以写：

var tdText = $('tr.select').find('td:first-child').text();

将通过此选定的tr进行搜索。从那里，找到td并获取其文本

此外，您可以这样做来解决您的问题

https://jsfiddle.net/6oxLhkv8/

$("#testTable tr").click(function() {
  var id = $(this).find("td:first-child").text();

  $.ajax({
    url: './getMyData.php',
    method: 'POST',
    dataType: 'json',
    data: {id: id}
    contentType: 'application/json',
    success: function(result) {
      $("#div1").html(result);
    }
  });
});

Answer 3

使用$('td.select td:first-child').text();或$('td.select').children().first().text();获取所需行的内部文本。

请注意，您的DOM中只应有1 td个select个字段。

单击表行时如何发出Ajax请求？

3 个答案: