CODEWITHSUNDEEP
htmljquery
Alex Sparrow
Alex Sparrow

Reputation: 237

How to get HTML table row data?

 <section class="p-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card bg-light">
                        <div class="card-body">
                            <table class="table table-hover text-center" id="data-table">
                                <thead class="bg-dark text-white">
                                    <tr>
                                        <th>S.NO</th>
                                        <th>NAME</th>
                                        <th>CATEGORY</th>
                                        <th>DETAILS</th>
                                    </tr>
                                </thead>
                                <tbody id="data-table-body">
                                    <tr>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

for (var i = 0; i < data.projects.length; i += 1) {
                        $("#data-table-body").append('<tr id="tr-dt'+i+'">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>'
                            + data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='showMembers()'> click here </button>" + '</td>' + '</tr>');
                    }

I have created a table dynamically, and my last column is a button. Each row has a button. My problem is when I click on that button, get that row value.

How to get row value when I click each button. How to achieve solve my case? Thanks

Upvotes: 1

Views: 245

Answers (4)

0xdw
0xdw

Reputation: 3842

const data = {
  projects: [{
    name: 'A',
    category: 'CTG'
  }, {
    name: 'B',
    category: 'CTG'
  }]
};

for (var i = 0; i < data.projects.length; i += 1) {
  $("#data-table-body").append('<tr id="tr-dt' + i + '">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>' +
    data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='get_data(" + i + ")'> click here </button>" + '</td>' + '</tr>');
}

function get_data(index) {
  console.log(data.projects[index]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="p-3">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="card bg-light">
          <div class="card-body">
            <table class="table table-hover text-center" id="data-table">
              <thead class="bg-dark text-white">
                <tr>
                  <th>S.NO</th>
                  <th>NAME</th>
                  <th>CATEGORY</th>
                  <th>DETAILS</th>
                </tr>
              </thead>
              <tbody id="data-table-body">
                <tr>

                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

  • Add event to click event:

    onclick='showMembers(event)'

  • Then use data attributes to store any data you want in a html element, so you can use dataset to retrieve it:

    '<tr data-id="tr-dt'+i+'">'

  • Event will have your target element:

    function showMembers(e) {
    e.target // <- the clicked button
}

  • Navigate to the desired element:

    e.target.parentNode.parentNode
  ^ btn  ^ td       ^ tr

  • Get the desired data from dataset:

    e.target.parentNode.parentNode.dataset.id;


function showMembers(e) {
  console.log(e.target.parentNode.parentNode.dataset.id);
}
<table>
  <tr data-id="1">
    <td>#1</td>
    <td><button type="button" onclick="showMembers(event)">Click here</button>
  </tr>
</table>

Upvotes: 0

Derek Wang
Derek Wang

Reputation: 10204

When calling showMembers function on each button, you can simply pass i value and using that index, you can get the selected projects value as follows.

const data = {
  projects: [
    { name: 'Name1', category: 'Category1' },
    { name: 'Name2', category: 'Category2' },
    { name: 'Name3', category: 'Category3' },
    { name: 'Name4', category: 'Category4' }
  ]
};

for (var i = 0; i < data.projects.length; i += 1) {
  $("#data-table-body").append('<tr id="tr-dt' + i + '">' + '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>' +
    data.projects[i].category + '</td>' + '<td>' + "<button class='btn btn-outline-dark btn-sm' onclick='showMembers(" + i + ")'> click here </button>" + '</td>' + '</tr>');
}

function showMembers(index) {
  console.log(data.projects[index]);
}
<section class="p-3">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="card bg-light">
          <div class="card-body">
            <table class="table table-hover text-center" id="data-table">
              <thead class="bg-dark text-white">
                <tr>
                  <th>S.NO</th>
                  <th>NAME</th>
                  <th>CATEGORY</th>
                  <th>DETAILS</th>
                </tr>
              </thead>
              <tbody id="data-table-body">
                <tr>

                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 1

Esotopo21
Esotopo21

Reputation: 422

You could insert an argument in the onlick function so the code will execute with that parameter. For example you can think of using the index of the element in the data.projects array and then using it in the showMembers function

for (var i = 0; i < data.projects.length; i += 1) {
                    $("#data-table-body").append('<tr id="tr-dt'+i+'">' + 
 '<td>' + (i + 1) + '</td>' + '<td>' + data.projects[i].name + '</td>' + '<td>'
                        + data.projects[i].category + '</td>' + '<td>' + " 
<button class='btn btn-outline-dark btn-sm' onclick='showMembers("+i+")'> click here 
 </button>" + '</td>' + '</tr>');
                }


function showMembers(n) { console.log(data.projectes[n] }

Also i suggest you to use these quotes `` when using js, this allows you to rewrite

"<button class='btn btn-outline-dark btn-sm' onclick='showMembers("+i+")'> click here </button>"

as

 `<button class='btn btn-outline-dark btn-sm' onclick='showMembers(${i})'> click here </button>`

Upvotes: 0

Related Questions