javascript - How to make Ajax request when click on Table row?

I have a table and when I click on a row the <TR> element is having a class assigned "selected". Now I want to capture the content of the first <TD> element of that row (because it is an ID) and do an Ajax request, the response will be used to fill a form next to the table.

I can't write an onClick event in the <TR> html element, because the table is generated by another source, but I can see that the class get added and removed when click on a row. So i need to have it outside of the table html.

I am using Codeigniter as PHP Framework, but i am kinda new to jquery ajax function. thanks for help..

I have an fiddle

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

#testTable tr {
  margin: 4px;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;
}

.blue {
  color: blue;
}

.select {
  background: yellow;
}

<script src=".0.0-alpha.6/js/bootstrap.min.js"></script>
<link href=".0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src=".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>

I am using Codeigniter as PHP Framework, but i am kinda new to jquery ajax function. thanks for help..

I have an fiddle

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

#testTable tr {
  margin: 4px;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;
}

.blue {
  color: blue;
}

.select {
  background: yellow;
}

<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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>

SOLVED

The CI Controller returned an array instead an Object, which I couldn't utilize with the below suggested code.

I changed my CI model like below:

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

}

This returned an prepared json object which I can select each individual item.

Share Improve this question edited Jun 17, 2017 at 12:18 asked Jun 16, 2017 at 17:08 Cyber 2,7444 gold badges25 silver badges43 bronze badges

u havent echo anything here and what does $groups_array[] = array(); do ???????????? – Riaz Laskar Commented Jun 16, 2017 at 20:51
what does $this->group_model->json_group_detail($group_id); return ???? – Riaz Laskar Commented Jun 16, 2017 at 20:52
you should hv something like echo json_encode($response_array); – Riaz Laskar Commented Jun 16, 2017 at 20:53
did u try this echo json_encode($groups['group_detail_json']); – Riaz Laskar Commented Jun 16, 2017 at 20:55
wired, when I do get in $group_id = (int) $this->input->post('id'); then I do get a response, if I leave post it is a echo null and an empty array – Cyber Commented Jun 16, 2017 at 21:00

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3

This should work fine :

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



        });

on dynamic generated content by js binding works best.

You can write:

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

Through this selected tr will be searched. From there, find the td and get its text

Further, you could do this to solve your problem

https://jsfiddle/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);
    }
  });
});

use $('td.select td:first-child').text(); or $('td.select').children().first().text(); to get the inner text of the desired row.

Note that you should only have 1 td with class select in your DOM.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744316451a4568206.html

javascript - How to make Ajax request when click on Table row? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to make Ajax request when click on Table row? - Stack Overflow

3 Answers 3

相关推荐