My HTML Code is like this :
...
<button class="save bookbtn mt1">More</button>
...
<div class="cruisedropd">
<div id="loading" class="loading"></div>
</div>
...
My Javascript Code is like this
...
$('.save').click(function () {
...
success: function (response) {
...
var elem = $parent.find('.loading').empty();
elem.append('<table class="table">\
<tbody>\
<tr>\
<th>Status</th>\
<th>Room Grade</th>\
<th>Meal</th>\
<th>Per Room.Night</th>\
<th>Cancel Policy</th>\
<th>Book It</th>\
</tr>')
for(var i=0; i<response.SearchAvailResponse.Hotel.length; i++){ //make sure to use var
elem.append('<tr>\
<td>' + Status + '</td>\
<td>' + RmGrade + '</td>\
<td>' + Meal + '</td>\
<td>' + Currency + ' ' + TotalRate + '</td>\
<td>Cancel Policy</td>\
<td>\
<form action="details.html">\
<button class="bookbtn mt1" type="submit">Book</button>\
</form>\
</td>\
</tr>'); //add the new content
}
elem.append('</tbody>\
</table>')
...
}
...
}
...
The View is like this : http://imgur.com/1OIVGGU
Why my css display irregular?
Any solution to solve my problem?
Thank you very much
The short answer is that you can not build a table in that way.
Your first snippet of code appends the table headers. Then DOM automatically adds closing table tag.
Your next snippet of code runs a loop to append rows. However, the table was already created in the previous step.
So you end up with 2 tables in the DOM which don't align.
Suggest building the table as a string and then appending that string to the div so that the DOM builds a single table.
UPDATE:
This code, in response to OP comment, demonstrates how to make the original code work with just 3 very minor changes. The table is first built as a string. The string is then appended to the innerHTML of the container. Doing it this way prevents the DOM from prematurely adding a closing tag to the table element, as was the case in the original code.
And now the table header and rows align, which was the stated problem.
Click the "Run code snippet" button to see it work.
function success() {
var html =('<table class="table">\
<tbody>\
<tr>\
<th>Status</th>\
<th>Room Grade</th>\
<th>Meal</th>\
<th>Per Room.Night</th>\
<th>Cancel Policy</th>\
<th>Book It</th>\
</tr>')
for(var i=0; i<10; i++){
html += ('<tr>\
<td>' + Status + '</td>\
<td>' + RmGrade + '</td>\
<td>' + Meal + '</td>\
<td>' + Currency + ' ' + TotalRate + '</td>\
<td>Cancel Policy</td>\
<td>\
<form action="details.html">\
<button class="bookbtn mt1" type="submit">Book</button>\
</form>\
</td>\
</tr>');
}
html += ('</tbody>\
</table>');
$('#container').html( html );
}
// test data
var Status="OK", RmGrade=5, Meal="Yes", Currency="Euro", TotalRate="100";
success();
td,th {padding:2px; border:1px gray solid;}
th {background-color: peru; }
table {border-collapse: collapse;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="container"></div>
Do you mean that the table content is not aligned properly? Verify your CSS that there is no width property on your TD element.
HTML:
<table>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
</tr>
<tr>
<td>Wat</td>
<td>Wat2</td>
<td>Wat3</td>
</tr>
<tr>
<td>Foo</td>
<td>Foo2</td>
<td>Foo3</td>
</tr>
</table>
CSS:
table {
width: 100%;
}
th, td {
text-align: left;
}
Fiddle: https://jsfiddle.net/vup7vz1k/1/
Related
I am trying to save this data to the DataTable when I have data from the database. But when I do this, the first line of the DataTable shows 'No data available in table'. This is because before the ajax form works, the datatable.js file works.( because of taking a long time the working of ajax form ). Namely the system can not read any data in the DataTable in this way. Then when the ajax form run , my data is saved in the datatable, but the first line shows 'no data available in table'.And the datas is dysfunctional. So I can not press the update and delete buttons. Like this :
And my Ajax Code
var xGlobalTitle;
$.ajax({
type: 'GET',
url: '/Home/postInformationofConferenceTitle',
dataType: "JSON",
success: function (data) {
xGlobalTitle = data.xglobalTitle;
}
}).done(function(data){
$.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {
var ndx = 0;
$.each(data.xroom_name, function (key, value) {
var Xroom_name = data.xroom_name[ndx];
var Xroom_plan = data.xroom_plan[ndx];
var body = '<tr>';
body += '<td>' +
'<div class="img-container">' +
'<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
'</div>' +
'</td>' ;
body += '<td id="imgname">' + Xroom_name + '</td>' ;
body += '<td class="text-right">' +
'<i class="fa fa-edit"></i>' +
'</i>' +
'</td>' ;
body += '</tr>';
$(body).appendTo($("tbody"));
$("#datatables").DataTable();
ndx++;
});
});
});
The main thing is that I am using nested ajax form in here, so this code works at a time of n^2. And since it runs the dataTable.js script before completing this code run, the first line shows 'No data available in table'( Since this ajax codes takes a lot of time to work ).
How can I fix it?
Here's a sample on event delegation for dynamically created elements.
See jQuery .on() for more details.
As you can see, this sample onclick event binds to elements that have already been created and elements that are yet to be added to the table.
Click on a table cell to trigger this event.
$( "#dataTable tbody tr td" ).on( "click", function() {
console.log('Clicked target text: ' + $(this).text() );
});
#dataTable {
width: 100%;
}
#dataTable thead {
text-align: left;
}
#dataTable tbody tr td {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Begin table -->
<table id="dataTable" class="striped col s12">
<!-- Begin table head -->
<thead>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>TYPE</th>
</tr>
</thead>
<!-- ./ End table head -->
<!-- Begin table body -->
<tbody>
<tr>
<td>2/21/18</td>
<td>CONNOR, SARAH</td>
<td>HOME</td>
</tr>
<tr>
<td>2/21/17</td>
<td>TRAVOLTA, JOHN</td>
<td>HOME</td>
</tr>
<tr>
<td>2/21/16</td>
<td>CRUISE, TOM</td>
<td>BUSINESS</td>
</tr>
</tbody>
<!-- ./ End table body -->
</table>
<!-- ./ End table -->
I've Add the event click to my dynamic table but it doesnt work.
$("#gridVille").append('<table id="idTableVille" class="table table-striped table-hover">');
$("#idTableVille").append('<thead>');
$("#idTableVille thead").append('<tr><th>Code commune</th><th>Libellé</th></tr>');
$("#idTableVille").append('</thead>');
$("#idTableVille").append('<tbody>');
for (i = 0; i < liste.length; i++) {
$("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
$('#idTableVille tbody').append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
$('#idTableVille tbody').append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
$("#idTableVille tbody").append('</tr>');
}
$("#idTableVille").append('</tbody>');
$("#gridVille").append('</table>');
$('#idTableVille tr').click(function () {
var id = $(this).find('td:eq(0)').text();
var libelle = $(this).find('td:eq(1)').text();
alert(id + ' ' + libelle);
});
this code is added after populating the table.
The scenario is :
I Open the modal (bootstrap modal)
I populate the table
I click to any row of table for getting the values of columns
You are appending the <tr> element to the <tbody> and then also appending every <td> to the <tbody> instead of the newly generated row, so instead of a regular table structure:
<table>
<tbody>
<tr id="something">
<td>Something</td>
<td>Hello!</td>
</tr>
</tbody>
</table>
You are getting this:
<table>
<tbody>
<tr id="something"></tr>
<td>Something</td>
<td>Hello!</td>
</tbody>
</table>
If you change the code inside the for loop it should get fixed:
for (i = 0; i < liste.length; i++) {
$("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
$('#idTableVille tbody tr#' + liste[i].id).append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
$('#idTableVille tbody tr#' + liste[i].id).append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
}
As you can see, I'm appending the elements to the newly created row, using the id to select it.
You can see it working here:
https://jsbin.com/yojajisuca/edit?html,js,output
I'm using bootstrap table library in my app that to render table with massive data and I need to open row in additional editable table. I found a lot of info in internet how to open row in model and put edited code to my app that to display row info inside div but cannot set it that to open it in editable table. I provide the plunker example.
Updated Cause I didn't get any work solution, I've tried to fix it by myself, so I know the solution isn't so good but for now it works for me. The question is still asking, how to edit field of new rendered table?
This is function of my solution:
$(function () {
var $result = $('#form');
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
//alert('Selected name: ' + getSelectedRow().text);
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
'</h3>' + '</table>'
);
})
});
You can use modals of boostrap, will open a modal. Check the documentation on http://getbootstrap.com/javascript/#via-javascript, just add the html, css and js references and call this code:
$('#table').on('click-row.bs.table', function (e, row, $element){ $('#myModal').modal('show') //Will be call the modal when you click a row
})
And you can pass all the information to the modal via javascript. Hope you understand me. :)
Not sure if I get what you need but i add this code on the
html:
<div id="form">
<input type="text" placeholder="Title1" id="titleForm1"></input>
<input type="text" placeholder="Title2" id="titleForm2"></input>
<input type="text" placeholder="Title3" id="titleForm3"></input>
<input type="text" placeholder="Title4" id="titleForm4"></input>
</div>
js:
$('#table').on('click-row.bs.table', function (e, row, $element) {
/*$result.html(
'<pre>' +
JSON.stringify(row, null, 1).replace(/,|}|{/g, " ")
//JSON.stringify(row).replace(/,/g, "<br/>")
+ '</pre>'
);*/
$('#titleForm1').val(row.name);
$('#titleForm2').val(row.stargazers_count);
$('#titleForm3').val(row.forks_count);
$('#titleForm4').val(row.description);
console.log(row);
})
Hope it helps you.
Well... the tittle says it. Here, I leave you the link.
I lost nearly 4 hours trying to make it work!
I want to add rows to the table, when I click the button. But it does not seem to do anything at all.
http://jsfiddle.net/QqMsX/24/
<table class="table table-bordered">
<thead>
<tr>
<th>Relation</th>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
</thead>
<tbody id = 'FamilyTable'>
</tbody>
</table>
<button onclick ="AddRow()" type="button" class="btn btn-primary">Add</button>
And the JavaScript Code.
function AddRow()
{
var Row = '<tr>'.
'<td>Data</td>'.
'<td>Data</td>'.
'<td>Data</td>'.
'<td>Data</td>'.
'<td>Data</td>'.
'<td>Data</td>'.
'</tr>';
$(Row).appendTo("#FamilyTable");
}
The string concatenation character in Javascript is +, not .. Also note that your original fiddle did not include jQuery. Try this:
function AddRow() {
var row = '<tr>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'</tr>';
$(row).appendTo("#FamilyTable");
}
Updated fiddle
A better alternative would be to attach your events using Javascript to avoid the outdated on* attributes. Something like this:
<button type="button" class="btn btn-primary">Add</button>
$(function() {
$('button').click(function() {
var row = '<tr>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'<td>Data</td>' +
'</tr>';
$(row).appendTo("#FamilyTable");
});
});
Example fiddle
I try to use the jQuery Append method but its removing tags (tr, td) of my html code which I want to append. Why is it removing these and how can i force this method just to append and not to analyse my code?
Here is an example file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).on('click', '#button1', function () {
var htmlAppend = '';
htmlAppend = htmlAppend + '<input type="hidden" name="content0" value="' + 'hiddenvalues' + '"/>' + '<tr>' +
'<td>' + 'content1' + '</td>' +
'<td>' + 'content2' + '</td>' +
'<td>' + 'content3' + '</td>' +
'<td><input style="width: 300px" type="text" name="content4"/></td>' +
'</tr>';
$("#ScenarioCompetenceRatings").append(htmlAppend);
});
</script>
</head>
<body>
<button id="button1">Add Row</button>
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th style="width: 300px">Column4</th>
</tr>
</thead>
<tbody id="ScenarioCompetenceRatings">
</tbody>
</table>
You are generating invalid markup. You should put the hidden input element in a td element. tbody element can only have tr children.
is this what you are trying to build? check on the fiddle i have created
http://jsfiddle.net/FWkd2/enter code here
to check my fiddle