append table to another div | JS jQuery - javascript

JSFiddle Here
I have 2 div in HTML
The first div for the folder column.
<div class="columnFolder-container"></div>
The second div for the column table. with class ._zTable
<div class = "_zTable"> </ div>
Then in javascript, I have 1 variable (var div =)
which includes 1 div (class="folder") inside the div contains the table with id="exTable".
I want the table to be moved into ._zTable and not in the div class .folder.
Because I want the div .folder in the column folder.
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
'<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>' +
'</div>';

You will need to split your variable into two.
I notice your table is inside your .folder div. I presume that shouldn't be the case.
The variables are then:
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>';
Then the code to put these in the right divs is:
document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;
or with jquery:
$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);

Using Jquery :
`$(document).ready(function() {
$('#exTable').appendTo('.columnFolder-container');
});`

Related

Reiterate through classes inside a class inside a div jquery

Suppose I have the following structure:
<div id="table">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">c</div>
</div>
</div>
How do I reiterate through them in a way that I create the same structure but with <table> instead of <div id="table">, <tr> instead of <div class="row"> and <td> with the content of the div instead of <div class="cell">;
I tried doing something like
let topics_table = '<table>'
$('#table > .row').each(function(){
topics_table += '<tr>'
$(this + ' .cell').each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
topics_table += '</tr>';
})
topics_table += '</table>`
But I get an error...
$(this + ' .cell')
Should be
$(this).find('.cell')
// or
$('.cell', this)
You're trying to concatenate a string to a DOM Element.
.each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
^^ that is also an issue, because jQuery passes the index in as the first argument, not the element.
.each(function(index, that){
topics_table += '<td>' + that.innerText + '</td>'
})

How to create html component in javascript

I wanted to create my html component in javascript. Is there any way I can get this div part from javascript function.
My html code
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" title="Type in a name">
<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>
</body>
This is my Tic for Tac answer.
var myFunction = function(){
var div = document.getElementById("yourId");
var myTable = '<input type="text" id="myInput" +
'onkeyup="myFunction()" title="Type in a name">'+
'<table id="myTable">'+
'<tr class="header"></tr>' +
'<tr><td>Germany</td></tr>'+
'<tr><td>Sweden</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>Germany</td></tr>'+
'<tr><td>Canada</td></tr>'+
'<tr><td>Italy</td></tr>'+
'<tr><td>UK</td></tr>'+
'<tr><td>France</td></tr>'+
'</table>';
div.innerHTML = myTable;
}
For appending you can use insertAdjacentHTML
Working fiddle
function myFunction(){
var tableStr = `<table id="myTable">
<tr class="header"></tr>
<tr><td>Germany</td></tr>
<tr><td>Sweden</td></tr>
<tr><td>UK</td></tr>
<tr><td>Germany</td></tr>
<tr><td>Canada</td></tr>
<tr><td>Italy</td></tr>
<tr><td>UK</td></tr>
<tr><td>France</td></tr>
</table>`;
document.getElementById('tableContainer').insertAdjacentHTML('beforeend', tableStr)
}
You can use document.createElement() like:
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
You can refer this link for more details
if you are using jquery,try:
$("#yourdivid").html('Your html code above');
with javascript:
var div1=document.getElementById('yourdivid');
div1.innerHTML='Your html code above';
jQuery: this is an example from my code, the var html just makes sure u don't have to write the same piece of code over and over again.
var html = '<div class="swiper-slide">';
html += '<div class="bigIm"><a href="' + url1 + '" target="_blank" class="inner" style="background-image: url(' + img1 + ')">';
html += '<div class="imgCont-b imgCont-b-cov1">';
html += '<i class="fa fa-' + d1.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d1.source + '</span>';
html += '<p>' + d1.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="bigIm">';
html += '<div class="half first"><a href="' + url2 + '" target="_blank" class="inner" style="background-image: url(' + img2 + ')">';
html += '<div class="imgCont-b imgCont-b-cov2">';
html += '<i class="fa fa-' + d2.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d2.source + '</span>';
html += '<p>' + d2.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '<div class="half last"><a href="' + url3 + '" target="_blank" class="inner" style="background-image: url(' + img3 + ')">';
html += '<div class="imgCont-b imgCont-b-cov3">';
html += '<i class="fa fa-' + d3.source.toLowerCase() + ' fa-2x tw-img" aria-hidden="true"></i>';
html += '<span class="tw-text">' + d3.source + '</span>';
html += '<p>' + d3.text + '</p>';
html += '</div>';
html += '</a></div>';
html += '</div>';
html += '</div>';
$('.s1 .swiper-wrapper').append(html);
Hope this helps, keep in mind that this code was meant for a website I made, so ur gonna have to change it a bit.

Open bootstrap table row in new table with possible field editor

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.

Adding id to a specific button using jQuery

I'm new to jQuery and JS. So I have this task to create tabel row using a dialog form. On every row the last cell must contain a button. My question is how can I add id for this specific button. I've tried selecting the button and adding .attr('id','delete'), but this changes the id of the button that opens the dialog.
So how can I add id only to the newly created button?
< script type = "text/javascript" >
function validateForm(form) {
var errors = [];
$(form.elements).each(function() {
var $this = $(this);
if (!$this.val()) {
var msg = $this.prev().html() + ' е задължително поле';
errors.push(msg);
}
});
return errors;
}
function saveForm(form) {
var nextNumber = $('table tr').length;
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
$('table').append(rowTpl);
}
$(function() {
$('#add-btn').button({
icons: {
primary: 'ui-icon-circle-plus'
}
}).on('click', function() {
$('#form-container').dialog('open')
});
$('#form-container').dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'Save',
click: function() {
var form = $(this).find('form').get(0);
var errors = validateForm(form);
if (errors.length) {
return alert(errors.join("\n"));
}
saveForm(form);
form.reset();
$(this).dialog('close');
}
}, {
text: 'Close',
click: function() {
$(this).find('form').get(0).reset();
$(this).dialog('close');
}
}]
});
})
$('#delete').button({});
$("#delete").click(function() {
$(this).parents('tr').first().remove();
});
< /script>
<style type="text/css"> table {
border-collapse: collapse;
}
th {
padding: 0.2em;
}
td {
margin: 0.2em;
padding: 0.2em;
text-align: center;
border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
padding: 0.8em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
<div id="container" class="ui-widget">
<div class="ui-widget-header ui-helper-clearfix">
<h3 class="float-left">ALL CARS</h3>
<button class="float-right" id="add-btn">
<span>Add New Address</span>
</button>
</div>
<div class="ui-widget-content">
<table width="100%">
<tr>
<th>#</th>
<th>Марка</th>
<th>Модел</th>
<th>Година</th>
<th>Километри</th>
<th>Премахни</th>
</tr>
<tr>
<td>1</td>
<td>BMW</td>
<td>i8</td>
<td>2015</td>
<td>10 000</td>
<td>
<button class="float-center" id="delete">
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
<div id="form-container" title="Add new car">
<form action="">
<div>
<label for="brand">Марка</label>
<input type="text" id="brand" />
</div>
<div>
<label for="model">Модел</label>
<input type="text" id="model" />
</div>
<div>
<label for="year">Година</label>
<input type="number" id="year" />
</div>
<div>
<label for="kms">Километри</label>
<input type="number" id="kms" />
</div>
</form>
</div>
</div>
Thank you!
Add id to the button in your rowTpl variable like following.
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
It will add button id as delete1, delete2, delete3,......
ids are singular so you should not be setting the same id on multiple elements. Second the onclick you are adding with that id is not going to be attached to the button that you create after that code runs. Just like if the phone rings and you are not there, you will not answer it.
Use event delegation to detect what one was clicked and you can use closest to get access to the row the button resides in.
//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {
var button = $(this); //The button that was clicked
var row = button.closest("tr"); //The row the button is in.
row.remove(); //delete the row
});
id must be unique in the entire document, so setting id to "delete" for all of these buttons is incorrect. You can set a class. When you are creating it, you could just create it as <button class='delete'>, and then use $(".delete") to find all buttons.
You can also set the action directly in the code:
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
'</td>' +
'</tr>';

jQuery Append removing tags

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

Categories