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
Related
In my Vue CLI component, I'm populating a row table dynamically
i.e. inside my methods:
add_row() {
var new_name = document.getElementById("new_name").value;
var new_country = document.getElementById("new_country").value;
var new_age = document.getElementById("new_age").value;
var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='country_row" +
table_len +
"'>" +
new_country +
"</td><td id='age_row" +
table_len +
"'>" +
new_age +
"</td><td><input type='button' value='Delete' class='delete' #click=\"delete_row(" +
table_len +
')"></td></tr>';
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
This is the HTML part of the component:
<table
align="center"
cellspacing="2"
cellpadding="5"
id="data_table"
border="1"
>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input
type="button"
value="Delete"
class="delete"
#click="delete_row('1')"
/>
</td>
</tr>
<tr>
<td><input type="text" id="new_name" /></td>
<td><input type="text" id="new_country" /></td>
<td><input type="text" id="new_age" /></td>
<td>
<input
type="button"
class="add"
#click="add_row()"
value="Add Row"
/>
</td>
</tr>
</table>
Notice in my add_row function, when populating the row, I append a delete button tag and in it, pass the method delete_row. Clicking on this delete button should fire the method as shown below:
in my methods:
delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
},
But the method is not being triggered from the delete_row function. I've confirmed that the rows are working well since my button for adding that row the add_row function fires. So my thinking is since I call the delete_row function from a dynamically created, there's perhaps something extra that I need to pass to my code to trigger this method?
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
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/
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
function CreateInterface(){
document.getElementById("welcome").innerHTML=
'<form action="?" method="get" onsubmit=" return validate(this)">' +
'<table id="dataTable" summary="" cellspacing="3" cellpadding="0" border="0">' +
'<tr id="tablerow">' + '<td><INPUT type="checkbox" name="chk"/></td> '+
'<th>Userid : </th>' + '<td ><input name="userid" type="text" class="text" value="" maxlength="10" /></td>' +
'</tr>' + '<tr><td colspan="2" align="center">'+
'<INPUT type="button" value="Add" onclick="addRow()" />' +
'<INPUT type="button" value="Delete" onclick="delRow()" />' +
'<input type="submit" value="submit" />'+'</td></tr>' +
'</table>' +
'</form>';
}
function addRow(){
var clnNode=document.getElementById("tablerow").cloneNode(true);
document.getElementById("dataTable").appendChild(clnNode);
}
This is my code , i want this cloned node to be inserted above the buttons. In fact this code is not working, i.e. node is not getting added to table. Please help me solve this
Do not use id="tablerow" as duplicate ids will cause malformed HTML.
Change <tr id="tablerow"> in your string to just <tr>
Script
function addRow() {
var referenceNodes = document.getElementById("dataTable").getElementsByTagName("tr");
//-2 because last row is button row
var referenceNode = referenceNodes[referenceNodes.length - 2];
var newNode = referenceNode.cloneNode(true);
newNode.getElementsByTagName("input")[0].checked = false;
newNode.getElementsByTagName("input")[1].value = "";
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
Demo: http://jsfiddle.net/naveen/wbFMm/
You need to use insertBefore and pass lastChild as second parameter to insert the cloned row just above buttons.
function addRow(){
var table=document.getElementById("dataTable")
var clnNode=document.getElementById("tablerow").cloneNode(true);
table.insertBefore(clnNode,table.lastChild);
}
Here is working example: http://jsfiddle.net/amantur/8KYum/10/
As for code is not working, you are not calling CreateInterface from anywhere. Set it up to run on onLoad and things will work.
Your problem is your using the same ID for several elements (tableRow). An id must be unique on an html page. As seen in here.
A better solution would be to have only one row with the ID and every time you clone the row simply remove the id from the clone.
try the below code. I've just tweaked your existing addRow function
function addRow(){
var clnNode=document.getElementById("tablerow").cloneNode(true);
tableObj = document.getElementById("dataTable");
tbodyObj = document.getElementById("dataTable").getElementsByTagName('tbody')[0]
tableObj.insertBefore(clnNode, tbodyObj)
}