Create a table inside script tag - javascript

How do I create a table inside the script tag without going to another page? I am currently using the document.write() function but it opens a new page but i want it to stay on the page as i click my button? here is my current code:
$( "#searchVehicleDesc" ).button().click(function( event ) {
document.write('<fieldset>');
document.write('<legend>Dashboard<\/legend><br>');
document.write('<table border="1" width="650">');
document.write('<tr bgcolor=#c0c0c0>');
document.write('<td width=100 align="center"><font face="helvetica"><b>Vehicle Name<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Service Type<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Others<\/b></\font><\/td>');
document.write('<td width=100 align="center"><font face="helvetica"><b>Reference No.<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Date<\/b><\/font><\/td>');
document.write('<td width=80 align="center"><font face="helvetica"><b>Reference Type<\/b><\/font><\/td>');
document.write('<\/tr>');
document.write('<\/table>');
document.write('<\/fieldset>');
});

Do something like this:
var myTable =
'<fieldset>' +
'<legend>Dashboard</legend></br>' +
'<table border="1" width="650">' +
'<tr bgcolor=#c0c0c0>' +
'<td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Others</b></font></td>' +
'<td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td>' +
'<td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td>' +
'</tr>' +
'</table>' +
'</fieldset>';
$( "#searchVehicleDesc" ).button().click(function( event ) {
$(document.body).append(myTable);
});
Notice that you don't have to escape forward slashes (/) in JavaScript strings.
You can also make the table HTML a lot shorter, while also making it easier to maintain, by using CSS:
In your JavaScript:
var myTable =
'<fieldset>' +
'<legend>Dashboard</legend></br>' +
'<table>' +
'<tr>' +
'<td class="large">Vehicle Name</td>' +
'<td class="small">Service Type</td>' +
'<td class="small">Others</td>' +
'<td class="large">Reference No.</td>' +
'<td class="small">Reference Date</td>' +
'<td class="small">Reference Type</td>' +
'</tr>' +
'</table>' +
'</fieldset>'
CSS file:
table{
border: 1px solid black;
}
table tr{ /* You could use just `tr{` here (leave out `table `), I just prefer this */
background-color: #c0c0c0;
}
table tr td{ /* Same here, for `td{` */
font-family:helvetica;
font-weight:bold;
text-align: center;
}
.large{
width: 100px;
}
.small{
width: 80px;
}

document.write() will overwrite current content in your page. You can use .append() instead:
$("#searchVehicleDesc" ).button().click(function( event ) {
$(document.body).append('<fieldset><legend>Dashboard</legend><br /><table border="1" width="650"><tr bgcolor="#c0c0c0"><td width="100" align="center"><font face="helvetica"><b>Vehicle Name</b></font></td><td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td><td width="80" align="center"><font face="helvetica"><b>Others</b></font></td><td width="100" align="center"><font face="helvetica"><b>Reference No.</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Date</b></font></td><td width="80" align="center"><font face="helvetica"><b>Reference Type</b></font></td></tr></table></fieldset>');
});

You should create DOM elements in JS using the document.createElement() method. Read this: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
You could also append the html string like document.getElementById('target_container').innerHTML('<div><-- your über long html string--></div>');
In case of jQuery you can simply append your html string to an object, like $('#target_container').html('<div><-- your über long html string--></div>');

use jQuery's append() function.
$( "#searchVehicleDesc" ).button().click(function( event ) {
$('#searchVehicleDesc').append('<fieldset>');
});
see jsFiddle:
http://jsfiddle.net/L2DEE/

That is because each time you call document.write, you are overriding the document.
Concat all the strings and then append it to some container.

You appear to be using jQuery, there are lots of methods you can use to add content to an existing page:
html
append
appendTo
prepend
prependTo
before
insertBefore
after
insertAfter
...and others. They're all covered, with examples, in the jQuery API documentation.

Just make a div and put your table in it.
<div id="container"></div>
your script should be something like this:
var table = '<fieldset>'+
'<legend>Dashboard</legend><br>'+
'<table border="1" width="650">';
... and so on...
Then simply append to your container.
$("#container").append(table);

You can do following
var myObj, txt;
txt += "<table>"
myObj = JSON.parse(text);
for (x in myObj.issues) {
console.log(myObj.issues[x])
txt += "<tr><td>" + myObj.issues[x].key + "</td>";
txt += "<td>" + myObj.issues[x].fields.summary + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;

Related

Append JavaScript variable to option element

I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN

append table to another div | JS jQuery

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');
});`

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.

Find input field using jQuery

I've been trying to find three inputs (type=text) which were added dynamically using jQuery. I've tried to use .closest(), .parents(), .find(), and .children(), but I failed.
I also tried with document.getElementsByName, but it does not return the correct value if I create more than one group of inputs (which can be added dynamically, as I said before).
My code is the following:
function update(username, row) {
affiliation_val = $(document.getElementsByName('affiliation')).val(),
comments_val = $(document.getElementsByName('comments')).val(),
role_val = $(document.getElementsByName('role')).val();
//the search above does not work when I add multiple inputs… it returns only the first three inputs
console.log( $(row).closest(“input”) ); //one of my attempts... I also did using a combination of parents("tbody") and children("input"), for example... and many others
}
function format(d) {
var message1 = '<table cellpadding="8" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td class="text-right"><b>User ID:</b></td>'+
'<td class="text-left"> '+username+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Password last set:</b></td>'+
'<td class="text-left"> '+d.pwd_last_set+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Uid number:</b></td>'+
'<td class="text-left"> '+d.uid+'</td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Email:</b></td>'+
'<td class="text-left"> '+d.email+'</td>'+
'</tr>'+
split_projects(d.projects_name, d.projects_role),
message2 = '<tr>'+
'<td class="text-right"><b>Affiliation:</b></td>'+
'<td class="text-left"><input type="text" name="affiliation" value="'+d.affiliation+'" '+readonly+' /></td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Comments:</b></td>'+
'<td class="text-left"> <input type="text" name="comments" value="'+d.comment+'" '+readonly+' /></td>'+
'</tr>'+
'<tr>'+
'<td class="text-right"><b>Role:</b></td>'+
'<td class="text-left"><input type="text" name="role" value="'+d.role+'" '+readonly+' /></td>'+
'</tr>',
message3 = show_inconsistency(inconsistent)+
show_miss_uid(miss_uid)+
'<tr>'+
'<td> </td>' +
'<td>'+
'<button type="button" class="btn btn-default" onclick="sendMail(\'' +username+ '\'); return false">' +
'<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Request change of permission' +
'</button> <br/><br/> ' +
'</td>' +
'</tr>' +
'</table>',
button = '<tr><td> </td><td><button class="btn btn-default" onclick="update(\''+username+'\', this)">Update</button</td></tr>';
return message1+message2+button+message3;
}
Any help would be highly appreciate...
Use the jQuery( "[attribute='value']" ) selector
affiliation_val = $( "input[name='affiliation']" ).val();
comments_val = $( "input[name='comments']" ).val();
role_val = $( "input[name='role']" ).val();
As also suggested by #DBS, use .each().
$('[name="role"]').each(function(index, element){
console.log( $(element).val() );
});
This will loop through every element currently on the page with the name "role" and print their value to the console.
If you only needed to find the elements (to do something else with them, as you suggest in your question), then you can use element inside the .each() loop to do stuff with each element.
Here's another idea. If you know the parent of the elements (since it sounds like you have more than one of each of these elements on the page), and are interested in a particulare one, try this:
$('#myParentID [name="role"]');
This will select only the role input inside #myParentID.
The following should work as your selector, change "role" accordiingly:
$( '#tableId input[name="role"]' ).val();
Edited after more detail (see comments below)

provisional header are shown

I am using the below code first time the code is working when i give print next time print is not working and then when i give refresh the browser is loading long time .
this is php code
<p><img src="images/logo_print.png" width="635" height="143" alt="" /></p>
<h3>Test title</h3>
<h4><strong>Authors : Author name</p>
<h4><strong>Author Address : </strong></h4><p>Author Address</p>
<h4><strong>Abstract : </strong></h4><p style="text-align:justify;"> abstract</p>
<h4><strong>Keywords : </strong></h4><p>Keyword</p>
<div class="cls" style="border-top:1px solid #656565; margin:10px 0px;"></div>
javascript code is
enter code here
function PrintParts(arrElementNames){
var objWindow=window.open("about:blank", "print", "left=0, top=0, width=800, height=430, toolbar=no, scrollbars=yes");
var strHtml="<html><link href='css/style.css' rel='stylesheet' type='text/css' />";
strHtml += "<head>";
strHtml += "</head>";
strHtml += "<body><table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#FFFFFF>";
strHtml += "<tr><td height=10> </td></tr></table>";
strHtml += "<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#ffffff><tr><td>"
for (var i=0; i<arrElementNames.length; i++){
var element=document.getElementById(arrElementNames[i]);
strHtml += element.innerHTML;
}
strHtml +="</td></tr> ";
strHtml +="</table>";
strHtml += "</body>";
strHtml += "</html>";
objWindow.document.write(strHtml);
objWindow.document.close();
objWindow.print();
objWindow.close();
}
the error is shown as:
CAUTION : Provisional headers are shown.
how can i solve this problem in this coding. i am really wast of my time but i can't solve this.

Categories