We Keep Coding

Setting the column widths of a dynamically created table to fit contents

I am dynamically creating a table and I want the column widths to shrink/expand to the size of the contents. I have tied:
#parTable tr td {
width: 1%;
white-space: nowrap;
}
And when creating the rows:
html += "<tr>"
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='patparId' value='' disabled></td>";
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='endDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='parDescription' class='fullWidth' value='" + parDescriptionArray[0] + "'></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' name='addPARbtn' class='btn-info' value='Add'></td>";
html += "</tr>";
The table is:
<!-- PAR table -->
<table class="table table-hover table-bordered" id="parTable">
<thead>
<tr>
<th>patparId</th>
<th>PAR</th>
<th>Start Date</th>
<th>End Date</th>
<th>Description</th>
</tr>
</thead>
<tbody id="parTablebody">
<tr>
<!-- Place for PAR details -->
</tr>
</tbody>
</table>
This is the resulting table:

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.

how to pass a value in a URL using JavaScript?

I am trying to do a real-time bidding system to bid jobs.I did the real-time code and I can view the jobs in a table. In each row there is a link when I click on it it should take me to another page with the id value in the url. My problem is when a I click on Apply link it didn't take me to the second page.
Anyone can help me please?
$(document).ready(function(){
done();
});
function done(){
setTimeout(function(){
updates();
done();
},500 );
}
function updates(){
$.getJSON("jobs_by_company_PHP.php", function(data){
$(".text_2").empty();
$("#subbu").empty();
$.each(data.result,function(){
$(".text_2").append("<style>table, td, th { border: 1px solid #ddd;
text-align: left; width:400px; font-size: 30px;}"+
" table {"+
" border-collapse: collapse;"+
" width: 170%; "+
" font-size: 30px; "+
"margin-left:0px;"+
" } "+
" th, td {"+
"width:400px;"+
" padding: 15px; "+
" font-size: 30px; "+
" } "+
"</style> <table summary='Summary Here' cellpadding='0' cellspacing='0'>" +
"<thead>" +
"<th> ID </th>" +
"<th>Name</th>" +
"<th>end_date</th>" +
"<th> time</th>" +
"<th> apply</th>" +
" </tr> "+
" </thead>"+
" <tbody> " +
'<tr class="light">' +
"<td>"+this['id'] +" </td>" +
"<td> "+this['name']+" </td>" +
"<td> "+this['end_date']+" </td>" +
"<td> "+this['time']+"</td>" +
"<td><a onclick="+ 'location.href="../index.php?id="'+this['id']+'";"'+
"a>Apply</a></td> "+
"</tr>"+
" </tbody> "+
"</tr> "+
" </tbody>"+
"</table>");
});
});
}

id="'+this['id']+'";" gives id="whateverid"
remove that quotation mark around your id like
id='+this['id']+';"