Develop Reference

how can I get value of row in table, when I click in botton

I have a table, with innumerable rows, when I click the button, I need to get the line id that the button is clicked on. How can I do this?
my attempt code:
function teste(){
$('table tr').each(function(){
var name = $(this).parent().find('.idServico').html();
alert(name);
});
}
my table that my js generate:
tabelaResultado.innerHTML += `
<tr>
<td class="idServico">${idServico}</td>
<td>${dataEntradaServico}</td>
<td>${dataSaidaServico}</td>
<td>${cpfPessoa}</td>
<td>${idStatus}</td>
<td>${descricaoServico}</td>
<td class="actions tirarCor">
<a class="btn btn-success btn-xs" href="/updateService">Visualizar</a>
<a class="btn btn-warning btn-xs" href="/updateService">Editar</a>
<button id="botaoExcluir" class="btn btn-danger btn-xs" onclick="teste()"data-toggle="modal" data-target="#delete-modal">Excluir</button>
</td>
</tr>

Remove the inline event handler from your button and setup an event listener with jQuery. Then you can use $(this) to refer to the button being clicked, .closest() to traverse upward to the parent <tr>, and .find() to get the <td> with the class idServico:
$('button.btn.btn-danger.btn-xs').click(function(){
var name = $(this).closest('tr').find('td.idServico').html();
alert(name);
})
If the rows are being added dynamically, you should instead use a delegated event handler:
$(document).on('click' ,'button.btn.btn-danger.btn-xs' ,function(){
var name = $(this).closest('tr').find('td.idServico').html();
alert(name);
})

Obtain current row from button click

I've been trying to read a particular value from a row of display that I have on my php webpage. The idea is I am trying to get the current value of the certain cell in the row, however, I've tried using getElementsByTagName does not work, as I can not access the value afterwards (only has HTMLCollection object). I am using closest, but this only works and gets the beginning row.
EDITED:
Does not seem to pop up anything. Well the modal does pop up, but no alerts.
Tried this demo but did not work either haha...
<td><button class='sellButton btn btn-primary' data-target='#modalsell' id='sellStock'>Sell Stock</button></td>
<div id="modalsell" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Sell Stocks</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<div class="input-group">
<label for="shares" class="input-group-addon glyphicon glyphicon-user">Amount of Shares:</label>
<input type="text" class="form-control" id="sharess" placeholder="Shares Selling...">
<label for="start" class="input-group-addon glyphicon glyphicon-user">Minimal Sell Price:</label>
<input type="text" class="form-control" id="starts" placeholder="(0 for No Limit)" value="0">
<label for="stop" class="input-group-addon glyphicon glyphicon-user">Max Sell Price:</label>
<input type="text" class="form-control" id="stops" placeholder="(0 for No Limit)" value="0">
</div> <!-- /.input-group -->
</div> <!-- /.form-group -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-toggle='modal' onclick="sellStock()">Place Sell</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
undefined elements in invoker
$(document).ready(function(){
$(".sellButton").on('click', function (e) {
alert('test 1');
$('#modalsell').modal('toggle', $(this));
});
$('#modalsell').on('show.bs.modal', function(button){
alert('test 2');
var $invoker = $(button.relatedTarget);
alert($($invoker).id);
});
});

Issue :
the main issue with your code is you are using same id in loop (id='sellStock'). This is the reason you are getting same tr on clicking any button.
Note : id attribute should be unique inside page.
Solution :
Try this code for getting parent tr of clicked button.
<th><button onclick="myFunction(this)">Sell Stock</button></th>
your handler function :
function myFunction(elem) {
var x = elem.parentElement.parentElement; // x is the parent row
//rest of your code goes here
}
Alternative :
You can also use class selector instead of id which is a better option.
update as per comment request :
you can use get the invoker element of modal by doing this. #your-modal is your modal selector, you can use class or id as per your requirement.
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
//rest of code
});
instead of :
alert($($invoker).id);
use this :
alert($($invoker).attr('id'));
Happy Coding!

Jquery solution
First Case:
If you want whole row of table then you have to identify your table using some unique class or Id.
Lets say if your table unique class name is "table-responsive" then you can get all row of table using
$(".table-responsive").find('tbody tr');
It will give you rows of tbody.
Second case:
If you want to get row of current click button(in this case sellStock) button then you can use parents in context of this on button click.
Example:
From #Touheed Khan answer:
Don't use id if you are generating multiple element in loop dynamically.
you can use class, otherwise it will get only first element.
Let's say if your button class name is rowButton then you can use it
as like below.
$(".rowButton").click(function() {
var currrentRow =$(this).parents('tr');
});
thanks #Touheed Khan.

use class and TD
"<tr>
<td>". $arrayval"</td>
<td class='need'>"."(Need)"."</td>
<td>".$arrayval."</td>
<td>".$arrayval."</td>
<td>".$arrayval."</td>
<td><button class='sellStock btn btn-primary' data-toggle='modal' data-target='#modal1'>Sell Stock</button></td>
</tr>";
use jQuery consistently
$(".table").on("click",".sellStock",function() {
var cellContent = $(this).closest("tr").find(".need").text();
});
or
$(".table").on("click",".sellStock",function() {
var row = $(this).closest("tr");
// handle row here
});

Bootstrap Modal Confirmation

I've got a table that displays user details per row along with a Remove button that launches a Bootstrap modal confirmation dialog box.
My goal is to have the confirmation button trigger an event which will delete that particular user.
How would I pass jsmith22 from the table row into my Javascript function?
HTML Table
<tr>
<td>jsmith22</td>
<td>John Smith</td>
<td>555-555-5555</td>
<td>test#gmail.com</td>
<td><button type="button" class="btn btn-default btn-lg btn-block roster-button active" data-toggle="modal" data-target="#removeUser">Remove</button></td>
</tr>
Modal dialog
<div aria-labelledby="myModalLabel" class="modal fade" id="removeUser"
role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Remove Employee</h4>
</div>
<div class="modal-body">
<p>Are you sure you wish to remove this user?</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
<button class="btn btn-danger" id="remove-button" type="submit">Remove</button>
</div>
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end modal -->
Javascript
// Remove button event trigger
$('#remove-button').click(function() {
$.post('/API/removeUser', {} );
});

Can do it with Bootstrap Modal event listener
Add data attribute data-id to modal trigger button
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
Add input type="hidden" to modal and pass the id value to modal hidden input when shown
Hidden Input
<input type="hidden" id="RowId" value="">
Modal event show script
$(document).ready(function(){
$('#removeUser').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
$('#RowId').val(id);
});
});
Now with click event
$('#remove-button').click(function() {
var delid = $('#RowId').val();
//Do what ever you like to do
$.post('/API/removeUser', {} );
});
Fiddle Example
Alternate Solution
You can skip the hidden input and create a global variable
Modal trigger button with data attribute data-id to modal trigger button
<td><button type="button" data-id="jsmith22" data-toggle="modal" data-target="#removeUser" class="btn btn-default btn-lg btn-block roster-button active">Remove</button></td>
Modal Event, Click function with Global variable script
$(document).ready(function() {
var delid = ''; //global variable
$('#removeUser').on('show.bs.modal', function(e) {
delid = $(e.relatedTarget).data('id'); //fetch value of `data-id` attribute load it to global variable
alert(delid);
});
$('#remove-button').click(function() {
alert(delid); //Use the global variable here to del the record
//Do what ever you like to do
//$.post('/API/removeUser', {} );
});
});
Alternate Solution Example

You can get the contents of the first td of the button's row with getting this:
var person = $(this).closest('tr').find('td').eq(0).html()
fiddle: https://jsfiddle.net/7j4bmgbv/

Only the first button is reacting to a click event

I have a jquery function attached to a btn-group like this:
<div class="row">
<!-- Vote button row -->
<div class="span8" id="votenumbers">
<div class="btn-group">
<button class="btn" id="votebutton" data-votevalue="1">1</button>
<button class="btn" id="votebutton" data-votevalue="2">2</button>
<button class="btn" id="votebutton" data-votevalue="3">3</button>
<button class="btn" id="votebutton" data-votevalue="4">4</button>
<button class="btn" id="votebutton" data-votevalue="5">5</button>
<button class="btn" id="votebutton" data-votevalue="6">6</button>
<button class="btn" id="votebutton" data-votevalue="7">7</button>
<button class="btn" id="votebutton" data-votevalue="8">8</button>
<button class="btn" id="votebutton" data-votevalue="9">9</button>
<button class="btn" id="votebutton" data-votevalue="10">10</button>
</div>
</div>
</div>
<!-- Vote button row ends -->
and this is the javascript im using to assign a function to each button.
$('#votebutton').each(function(){
$(this).click(function(){
var votevalue = $(this).data('votevalue');
var filename = $('.mainimage').data('filename');
var category = $('.mainimage').data('category');
$.ajax({
type: 'POST',
url: '?category=' + category,
data: {
"votevalue" : votevalue,
"filename" : filename
},
success: function(data){
$('body').html(data);
}
}); // end ajax
}); // end click
}); // end each
Now my problem is that only the first button is reacting to a click event. The other do not. Not sure why.

You assigned the same value for the 'id' attribute to all your buttons. Id attribute is supposed to be unique across the entire HTML page. The selector you used, $('#votebutton'), an id selector, returns a single element. This is why the click handler is only executing for one of your buttons. You should assign a different id value to each button, or no id at all.
You could get rid of the id attributes on the buttons altogether and use a class selector instead, to find the buttons:
$('#votenumbers .btn').each(function() { $(this).click(...) ... });

Codeigniter route on button click

Hi I am using codeigniter for this project
I have a button element as below
<div class=" pull-right" id="container">
<button class="btn btn-info">
<a style="text-decoration:none;color:white" href="">Guide</a>
</button>
</div>
This button element is part of a div which is one of the results from the search. When I click on the button, how do i pass the information of the div to the controller I want? The information I want to pass is just the element id of the div which is "container".

Try do like that
<button class="btn btn-info">
<a style="text-decoration:none;color:white" href="control/method/value">Guide</a>
</button>
In your class can do like that
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Control extends CI_Controller {
public function method($value) {
// Your value is in $value;
}
}
[Update]
Getting the parent ID element dynamically
<div class=" pull-right" id="container">
<button class="btn btn-info" onclick="window.location='/controller/method/' + this.parentNode.id;">
<a style="text-decoration:none;color:white">Guide</a>
</button>
</div>

Using jQuery:
$('.btn').click(function () {
$.ajax({
type : "POST",
url : 'controller/method',
data: {id : $(this).parent().attr('id')},
success : function(data) {}
});
});
In your controller:
$id = $this->input->post('id', TRUE);