I have a table table-striped and in which row there is a delete button. When the user click in the delete button, a modal dialog show askig id the user really want to delete that row.
I need to get the value to be delete, how could I get id td?
function modalAvisoExclusao() {
$('#confirmaExclusao').modal('show');
}
function excluirUO() {
$('#confirmaExclusao').modal('hide');
var table = $('#Lista').DataTable();
var d = table.cell(this).data();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Deleção Permanente</h4>
</div>
<div class="modal-body">
<p>Deseja realmente excluir este registro ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="confirmUo" onclick="excluirUO();">Excluir</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<table id="Lista" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</form>
Use ligneSel to get the data you want. It's an array.
var table = $('#Lista').DataTable({
select: 'single'
});
//Get selected row data
$('#Lista tbody').on('click', 'tr', function() {
ligneSel = table.row(this).data();
$('#user_').html(ligneSel[0]);
alert(ligneSel)
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Deleção Permanente</h4>
</div>
<div class="modal-body">
<p>Deseja realmente excluir este registro <span id="user_"></span>?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="confirmUo">Excluir</button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<table id="Lista" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmaExclusao">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
<i class='glyphicon glyphicon-pencil'></i> Alterar
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal">
<i class='glyphicon glyphicon-trash'></i> Excluir
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
Related
i want to hide 2 of my columns(td and tr) that i choose in my table when the screen minimized with Bootstrap css but it doesn't work for me.
<table class="table table-bordered table-fixed">
<thead>
<tr>
<th>#</th>
<th>Judul</th>
<th class="d-none d-sm-block">Batas Tanggal</th>
<th class="d-none d-sm-block">Ket</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td class="d-none d-sm-block">29/12/2022</td>
<td class="d-none d-sm-block">60.000
</td>
<td>
<span class="btn btn-danger rounded-circle"><i class="fa fa-times"></i></span>
</td>
<td class="text-center">
<i class="fas fa-eye"></i>
<i class="fas fa-edit"></i>
<form action="#" method="post" class="d-inline">
<button class="btn btn-warning delete" onclick="return confirm('Are you sure?')"><i class="fas fa-trash"></i></button>
</form>
</td>
</tr>
<tr>
<td colspan="6" class="text-center">No Task</td>
</tr>
</tbody>
</table>
I'm working with a dynamic table where each line of this table is a person's reg and each person has a lot of files that must be shown below their reg. The following image is how the html table supposed to works:
I'm using bootstrap 3.3 in my project and this is my HTML table code that is not working properly:
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<br><br>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
The above code is rendering the HTML table as following:
How can I fix my code to make the table rendering like in the first image?
Yout have to insert the "inner" table into a <td> tag.
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<td>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
For more information, please review HTML5.2: Tabular data
I have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:
The HTML code look as following:
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
I've tried a lot of settings, but it doesn't help.
How to put them next to each other?
UPDATE:
You can use below code and achieve
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>
Or if you use Bootstrap then you can get Bootstrap Code from Bootstrap Group Buttons or use below code
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
to achieve
This is an easy problem to fix.
As you used tables in your structure, you can use tables in the last column.
Inside that last column td, add a table. The table body should look like this.
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td>
<img src="{{ item.Avatar }}" />
</td>
<td>
<table>
<tbody>
<tr>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
</td>
<td>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
in stylesheet make button css display to inline or inline-block
Also do check the TD width and buttons width. If the buttons width is greater than the TD width it will break to next row for sure
Try this
<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>
What you were looking for is a button group.
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#editModal">Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
I have created a datatable using jquery. Its second column has account numbers. When user will click on account number, then a modal should appear on the page. Something like below image.
But my modal doesn't appear like popup. It appears like this:
Below is my code:
<div id="select-account-expanded" style="display:none">
<!-- Begin of select-statement modal -->
<div class="modal fade" id="select-statement-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="select-statement-title">Select Statement(s)</h4>
</div>
<div class="modal-body">
<table id="statement-table-modal">
<thead>
<tr>
<th>
<input type="checkbox" id="select-all-statement" value="" /><label for="select-all-statement"></label>
</th>
<th>Statement</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div> <!-- End of modal -->
<table id="multiple-account-table">
<thead>
<tr class="border-class">
<th class="black white-active-bg pad-bottom-0-5">
<input type="checkbox" id="select-all-statement" value="" /><label for="select-all-statement"></label>
</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>input type="checkbox" id="statement" value="" /><label for="select-all-statement"></label></td>
<td><span id="launch-modal">1000</span></td>
<td>Alwar</td>
<td>07/07/2015</td>
<td>$1000.00</td>
<td><input type="textbox" value=""/></td>
</tr>
</tbody>
</table>
</div>
There is a link, by clicking on that link, modal appears. Below is javascript code for the same:
$(document).on('click', '#launch-modal', function () {
$("#select-statement-modal").modal();
});
Any suggestion?
UPDATE
I found my mistake. There was some mistake in importing bootstrap.min.css file. Now I have corrected.And it started working fine.
It Will work properly try to implement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="select-statement-title">Select Statement(s)</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>eee</td>
<td>fff</td>
</tr>
<tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
</body>
</html>
Having spent a few hours debugging this same problem, I'd like to add a more detailed answer. The problem for me was that I mistakenly loaded the optional bootstrap theme css instead of the core css (on Wordpress):
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css',array(),'3.3.7' );
I should have loaded this:
wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',array(),'3.3.7' );
(see the difference in the URL between the two).
I have a page with 1 visible DIV and 2 hidden DIVs. When I click a button I want to show all 3 DIVs in the order as displayed below. I'm using Bootstrap.
Whats is happening is that the Visible Div is appearing only after the Hidden Div 2
Here's the code:
<div id="divEditor" hidden class="col-sm-8">
<textarea name="editor" id="editor"></textarea>
<div class="col-sm-6 marginVert12">
<a class="btn btn-single btn-gray pull-left" ng-click="stopEditing()"><i class="fa-angle-left"></i> Voltar</a>
</div>
<div class="col-sm-6 marginVert12">
<label class="col-sm-8">
<input type="text" placeholder="Nome" ng-model="nomeTemplate" class="form-control" />
</label>
<a class="btn btn-single btn-success col-sm-2" ng-click="stopEditing()"><i class="fa-save"></i> Guardar</a>
</div>
</div>
<div id="divVariaveis" class="col-sm-4 divDetail">
<h3 class="textAlign-Center">Variáveis</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Valor</th>
<th>Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8">
<div class="col-sm-12 marginVert12">
<a class="btn btn-single btn-success pull-right" ng-click="startEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-file-o"></i> Novo Template</a>
</div>
<table class="table table-striped table-bordered table-hover" id="tblTemplates">
<thead>
<tr>
<th>Nome</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rodapé</td>
<td><button class="btn btn-single btn-orange" ng-click="footerEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button></td>
</tr>
<tr>
<td>Carta Apresentação</td>
<td>
<button class="btn btn-single btn-info pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-file-pdf-o"></i> Ver em PDF</button>
<button class="btn btn-single btn-orange pull-left" ng-click="cartaEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button>
<button class="btn btn-single btn-danger pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-remove"></i> Remover</button>
</td>
</tr>
</tbody>
</table>
</div>
This is how you want to arrange them:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
Your col-sm-8's content should go in the above's col-sm-12s