I have a leaflet map and I would like to add a legend. In the map I have many filter which can return many lines colors. For example one can filter by lanes and got four colors.
I tried this (solution found on leaflet documentation) but I didn't work.
// Create a legend
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map_94a3167215404c0dad9233926d918875) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [110, 80, 50, 10],
labels = [];
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map_94a3167215404c0dad9233926d918875);
<div class="row h-100">
<div class="col-md-2" id="destinationDiv">
<hr>
<div class="">
<h3>Network attributes</h3>
</div>
<hr>
<div class="form-group w-75 mx-auto">
<label for="linkSelector" class="sr-only">Links</label>
<select id="linkSelector" class="form-control" onchange="linkDropDown();">
<option value="default">Links...</option>
<option value="lanes">Lanes (input)</option>
<option value="length">Length (input)</option>
</select>
</div>
<div class="legend"></div>
</div>
<div class="col-md-10">
<div class="folium-map" id="map_94a3167215404c0dad9233926d918875" ></div>
</div>
</div>
Related
I'm dynamicaly creating divs with a select2 select element. The problem is, it somehow loosk like it doesn't find the object when initializing the select2.
has anyone run into that problem before?
this is my code so far:
HTML:
<button id="addNewDocument" class="col-2 btn btn-primary add-doc-button">Neues Dokument</button>
<div style="display: none;">
<div id="docDescription" class='col-md-4 form-group documentDescription'>
<label class='control-label input-label'>Dokumenttyp</label>
<select class='form-control documentDescriptionSelect required' name='Chose Documenttype'>
<option value=""></option>
#foreach (var item in Model.DocumentTypes)
{
<option class="row" value='#item.Documentcode'>
<div>#Html.DisplayFor(modelItem => item.Documentcode)</div>
<div> - </div>
<div>#Html.DisplayFor(modelItem => item.Documentname)</div>
</option>
}
</select>
</div>
</div>
JS:
$("#addNewDocument").click(function () {
var uid = Math.floor(Math.random() * 26) + Date.now()
var selectID = uid + 1;
var newDocumentBox = $("<li class='row documentContainer justify-content-between' id='" + uid + "'></li>").prependTo("#newDocuments");
var newDocumentDescription = $("#docDescription").clone(true);
$("#docDescription").children().eq(1).attr("id", selectID);
newDocumentDescription.appendTo(newDocumentBox);
var newDroppableBox = $("<div class='documents col-md-7 droppableBox' ></div>").appendTo(newDocumentBox);
var newDeleteButton = $("<div class='close-container deleteButton' onclick='deleteDocument(" + uid + ")'><div class='leftright'></div><div class='rightleft'></div></div>").appendTo(newDroppableBox);
$(selectID).select2({
placeholder: "Bitte wählen Sie einen Dokumenttyp"
})
});
So i started to build a basic website as a practice, and i got until i have a basic html, containing a table of informations, and a form, where you can add to the html through javascript.
My html looks like this
<body>
<hr>
<p class="display-4 text-center">Termék lista</p>
<table class="table">
<thead>
<tr>
<th scope="col">Termék Név</th>
<th scope="col">Termék Azonosító</th>
<th scope="col">Termék Ár</th>
<th scope="col">Termék leírás</th>
<th scope="col">Raktáron</th>
<th scope="col">Törlés</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>mangó</td>
<td>1</td>
<td>499 Ft</td>
<td>Gyümi</td>
<td>Van</td>
<td> <button class="delete btn btn-primary">X</button> </td>
</tr>
</tbody>
</table>
<div class="container mt-5">
<div class="bg-success p-5">
<form id="input-form">
<p class="display-4 text-center">Termékek hozzáadása</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputProduct">Termék</label>
<input type="text" class="form-control" id="inputProduct" name="productName">
</div>
<div class="form-group col-md-6">
<label for="inputCode">Termék Azonosító</label>
<input type="number" class="form-control" id="inputCode" name="productCode">
</div>
</div>
<div class="form-group">
<label for="inputPrice">Termék Ára</label>
<input type="number" class="form-control" id="inputPrice" name="productPrice">
</div>
<div class="form-row">
<div class="form-group col-md-8">
<label for="inputDesc">Termék Leírás</label>
<select id="inputDesc" name="inputDesc">
<option value="Gyümölcs">Gyümölcs</option>
<option value="Zöldség">Zöldség</option>
</select> </div>
<div class="form-group col-md-4">
<label for="inputSupply">Raktáron </label>
<select id="inputSupply" name="productSupply">
<option value="Van">Van</option>
<option value="Nincs">Nincs</option>
</select>
</div>
</div>
<button id="submit-button" type="submit" class="btn btn-primary">Hozzáadás</button>
</form>
</div>
</div>
And this is my javascript code so far:
var products = [
{
productName:"körte",
productCode: 2,
productPrice: 30,
productDesc: "Gyümi",
productSupply: "Nincs",
productId: 1
},
{
productName: "répa",
productCode: 3,
productPrice: 20,
productDesc: "Gyümi",
productSupply: "Van",
productId: 5
},
{
productName: "paradicsom",
productCode: 4,
productPrice: 50,
productDesc: "Gyümi",
productSupply: "Nincs",
productId: 6
}
]
var table = '<tbody>'
for( i = 0; i < products.length; i++){
table += `<tr>`;
table += `<td>` + products[i].productName + `</td>`;
table += `<td>` + products[i].productCode + `</td>`;
table += `<td>` + products[i].productPrice + `</td>`;
table += `<td>` + products[i].productDesc + `</td>`;
table += `<td>` + products[i].productSupply + `</td>`;
table += `<td> <button class="delete btn btn-primary" id="${products[i].productId}">X</button> </td>`
table += '</tbody>';
}
document.getElementById('tbody').innerHTML = table;
const tBody = document.getElementById("tbody")
tBody.addEventListener("click", function(x){
console.log("remove from tomb");
console.log(x.target);
console.log("gomb id: " + x.target.id);
for (let i = 0; i < products.length; i++) {
console.log("tomb i id: " + products[i].productId);
if (x.target.id == products[i].productId) {
console.log("removed");
products.splice(i, 1);
}
}
if(x.target.classList.contains("delete")) {
x.target.parentElement.parentElement.remove();
}
console.log(products);
})
const productInput = document.getElementById("inputProduct");
const codeInput = document.getElementById("inputCode");
const priceInput = document.getElementById("inputPrice");
const descInput = document.getElementById("inputDesc");
const supplyInput = document.getElementById("inputSupply");
const submitButton = document.getElementById("submit-button");
const addProduct = (ev) => {
ev.preventDefault();
let newProduct ={
productName: document.getElementById("inputProduct").value,
productCode: document.getElementById("inputCode").value,
productPrice: document.getElementById("inputPrice").value,
productDesc: document.getElementById("inputDesc").value,
productSupply: document.getElementById("inputSupply").value,
productId: Date.now()
}
let newRow = document.createElement("tr");
newRow.innerHTML += `
<td>${newProduct.productName}</td>
<td>${newProduct.productCode}</td>
<td>${newProduct.productPrice}</td>
<td>${newProduct.productDesc}</td>
<td>${newProduct.productSupply}</td>
<td> <button class="delete btn btn-primary" id="${newProduct.productId}">X</button> </td>`
tBody.appendChild(newRow);
products.push(newProduct);
document.querySelector('form').reset();
console.warn("added", {products});
}
document.addEventListener("DOMContentLoaded", ()=>{
submitButton.addEventListener("click", addProduct)
})
The problem is, as you can see i already have a product in the html, but i think my javascript for function, which displays the data from the .js overwrited the data from the html, thus displaying only the 3 products from javascript var = products. How can i have both the html data and the javascript data displayed simultaneously, so i have all 4 products when i open my .html?
Just modify this line as following. Hope to help, my friend :))
document.getElementById('tbody').innerHTML += table;
Here is the output:
http://jsfiddle.net/3zd0y64n/
I have a form in Google sheets where I send dynamic data from the sheet.
I loop sheet data and create same number of blocks in a form as number of my headers.
I have a first block of elements written in html.
The rest of blocks I clone from the first one, clone its IDs and send my sheet titles to elements of the form.
First title I write (with the last title from an array) to the only block existing before looping.
Then I clone that block giving a clone new titles and trying to insert clones before the first block ([0]) but it gets wrong and overwrites my first hardcoded title.
It appends the blocks in random number, so I can't get my titles in the right sequence like "1,2,3".
It's always like "2,1,1" or "1,3,2" etc.
I've tried different variations of appending the cloned elements (like motherDiv.appendChild(clonedRow) and motherDiv.insertBefore(clonedRow, motherDiv.children[0]), but cannot get it to work properly.
Please point to what's wrong here.
Here's the code and the screen:
//my google app backend function with data
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]
var stats = {
statNumbers: numbers,
statStats: stats
}
//select initialization
document.addEventListener('DOMContentLoaded', function() {
var getstats = getStats();
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
//getting stats object
function getStats() {
google.script.run.withSuccessHandler(processStats).statsObj();
google.script.run.withFailureHandler(showError).statsObj()
return;
}
//creating dynamic stats fields in the form
function processStats(stats) {
//name first statistic with the last number
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[stats.statStats.length - 1] + ". " + stats.statStats[stats.statStats.length - 1]
//mother div
var motherDiv = document.getElementById("motherDiv")
//sample row to copy
var statRow = document.getElementById("statsample");
//loop stat names
for (var i = 0; i < stats.statStats.length - 1; i++) {
var statName = stats.statStats[i]
var statNumber = stats.statNumbers[i]
//cloning the original row
var clonedRow = statRow.cloneNode(true)
//setting unique ID to whole row
var rowId = clonedRow.id = "statsample" + i
//setting unique ID to stat div
var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber
//stat titles (except first one)
var statHtml = document.getElementById(clonedStatID).innerHTML = statNumber + ". " + statName;
var err = document.getElementById("err").innerHTML = motherDiv.children.length
//appending it to the mother div
//motherDiv.appendChild(clonedRow);
motherDiv.insertBefore(clonedRow, motherDiv.children[0]);
}
return;
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div id="motherDiv">
<!-- mother div -->
<div class="row" id="statsample">
<div class=" input-field col s3 #fffde7 yellow lighten-5">
<h6 id="statName" class="statClass"></h6>
</div>
<div class="input-field col s3">
<select class="icons browser-default" id="weeksSel4">
<option value="" disabled selected>Неделя</option>
</select>
</div>
<div class="input-field col s2">
<input id="numbers" type="text" class="validate">
<label for="numbers">Значение</label>
</div>
<div class="input-field col s1.5">
<select class="icons browser-default" id="measure">
<option value="" disabled selected>Ед. изм:</option>
<option value="">шт.</option>
<option value="">%</option>
<option value="">$</option>
<option value="">руб.</option>
<option value="">грн.</option>
</select>
</div>
<div class="input-field col s2.5">
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
</div>
</div>
<!-- row end -->
</div>
<!-- mother div end-->
<div id="err"> </div>
I'd recommend populating the 'master' div with the first element of the array and for the clones start iterating over the array from index 1.
We need to make some fundamental changes to your processStats(stats) function.
First populate the master:
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];
the following two lines are untouched
var motherDiv = document.getElementById("motherDiv")
var statRow = document.getElementById("statsample");
Change the for loop to start from 1
for (var i = 1; i < stats.statStats.length; i++) {
}
Now the for-loop itself needs some changes.
These three lines are okay
var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);
What I don't understand is the following
var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber
I know you want to give the freshly cloned divs child statClass a unique id with a sequential number but with every iteration of the for-loop this would give the first element in the list the id. Above you already have a variable which holds a reference to the cloned div clonedRow you can also use to access it's children.
So get rid of the line and use this:
clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
Now just append the div to the parent
motherDiv.appendChild(clonedRow);
Here's a working example - just click 'Run code snippet' to see it in action:
//my google app backend function with data
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]
var stats = {
statNumbers: numbers,
statStats: stats
}
function processStats(stats) {
//name first statistic with the last number
var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];
//mother div
var motherDiv = document.getElementById("motherDiv")
//sample row to copy
var statRow = document.getElementById("statsample");
//loop stat names
for (var i = 1; i < stats.statStats.length; i++) {
var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);
var rowId = clonedRow.id = "statsample" + i;
clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
var err = document.getElementById("err").innerHTML = motherDiv.children.length
motherDiv.appendChild(clonedRow);
}
return;
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
processStats(stats);
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div id="motherDiv">
<!-- mother div -->
<div class="row" id="statsample">
<div class=" input-field col s3 #fffde7 yellow lighten-5">
<h6 id="statName" class="statClass"></h6>
</div>
<div class="input-field col s3">
<select class="icons browser-default" id="weeksSel4">
<option value="" disabled selected>Неделя</option>
</select>
</div>
<div class="input-field col s2">
<input id="numbers" type="text" class="validate">
<label for="numbers">Значение</label>
</div>
<div class="input-field col s1.5">
<select class="icons browser-default" id="measure">
<option value="" disabled selected>Ед. изм:</option>
<option value="">шт.</option>
<option value="">%</option>
<option value="">$</option>
<option value="">руб.</option>
<option value="">грн.</option>
</select>
</div>
<div class="input-field col s2.5">
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
</div>
</div>
<!-- row end -->
</div>
<!-- mother div end-->
<div id="err"> </div>
Im using multiselect dropdown for my select control. Im adding options to select control in Javascript. Reading data from database through PHP and passing to javascript file. But the height of the options dropdown is small like i can only see 'Select All' check box with out any scrolling. But if i add the options in HTML itself, then the dropdown looks fine. What im missing here?
<script src="<?=BASE_URL?>dropdown/multiple-select.js"></script>
<link href="<?=BASE_URL?>dropdown/multiple-select.css" rel="stylesheet">
<div class="modal" id="SendmailModel" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Send Mail </h3>
</div>
<div class="modal-body">
<form id="mailcomposeForm" id="_id_">
<div class="control-group">
<label class="control-label">Event Details</label>
<div class="controls">
<table class="table table-condensed table-bordered table-striped" id="event_days_table" style="display: none;width:544px;font-size:14px;">
<tbody id="event_days_table_body">
</tbody>
</table>
</div>
</div>
<div class="control-group">
<label class="control-label" for="leave_status">Select Recipient(s)</label>
<select id="emplist" name="employee_name" value="" multiple="multiple">
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="modJs.SendingMail();">Send</button>
<button class="btn" onclick="modJs.closemaildialog();">Not Now</button>
</div>
</div>
</div>
</div>
script type="text/javascript">
$(function() {
$('#emplist').change(function() {
}).multipleSelect({
width: '100%',
height:'100%'
});
});
</script>
In my Javascript file..
Conferencelisting.method('MailSuccessCallback', function(callBackData) {
var row = '<tr><th>From</th><td>_from_</td></tr><tr><th>To</th><td>_to_</td></tr><tr><th>Type</th><td>_type_</td></tr><tr><th>Created By</th><td>_created_</td><tr><th>Details</th><td>_details_</td></tr>';
var eventdetails = callBackData[0];
var html = "";
var trow = "";
for(var i=0;i<eventdetails.length;i++){
trow = row;
trow = trow.replace(/_from_/g,Date.parse(eventdetails[i].From).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_to_/g,Date.parse(eventdetails[i].To).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_type_/g,eventdetails[i].type);
trow = trow.replace(/_created_/g,eventdetails[i].employee);
trow = trow.replace(/_details_/g,eventdetails[i].reason);
html += trow;
}
$('#event_days_table_body').html(html);
$('#event_days_table').show();
//Adding employees name in selection box.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
options += '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>';
}
$("#emplist").html(options);
$('#SendmailModel').modal('show');
});
If i add options in HTML file like this..i can get exact dropdown with scrolls..
<select id="emplist" name="employee_name" value="" multiple="multiple">
<option value="ALEX">ALEX</option>
<option value="BOB">BOB</option>
<option value="DE">DE</option>
</select>
I solved myself. I think the height is not the problem , the data are not getting added. SO i changed options adding code in javascript file. Now it works.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
$('#emplist').append( '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>' );
}
$('#emplist').multipleSelect( 'refresh' );
I'm try to align a table wich was generated by javascript, but I'already tried every thing and nothing work!
Note: I already try use display block on thead with text-align:center, already try to use display theader-goup too, align-text:center with a class for thead and th. But still doesn't work.
Can someone help me?
<div role="tabpanel" class="tab-pane" id="OrcamentoMaterial">
<div class="col-md-12">
<div class="page-header m-b-20" style="margin-top:-30px;">
<h2 class="m-b-10"><strong style="font-size:18px;">
<a style="color: red;">{{item.Codigo}} </a> - {{item.Descricao}}</strong></h2>
<div class="col-md-3">
<div class="fg-lin">
<label>Nome da pessoa que solicitou o orçamento</label>
<input id="txtPessoaSolicitouOrcamento" class="form-control fg-input" />
</div>
</div>
<div class="col-md-3" style="margin-top:-6px;">
<div class="fg-line">
<div class="select">
#Html.Label("Executor")
#Html.DropDownListFor(model => model.TecnicoId, Model.listaTecnicos, "Selecione", new { #id = "ddlPessoaExecutora", #style = "height:20px !important;", #class = "form-control " })
</div>
</div>
</div>
<div class="col-md-3">
<div class="fg-lin">
<label>Descrição</label>
<input id="txtDescricaoOrcamento" class="form-control fg-input" />
</div>
</div>
<div class="col-md-3">
<div class="fg-lin">
<label>Data orçamento</label>
<input type="datetime" id="txtDataOrcamento" class="form-control fg-input datepicker" />
</div>
</div>
</div>
<fieldset class="col-md-12 m-t-30 m-b-20">
<legend>ORÇAMENTO MATERIAL</legend>
<div class="row m-t-10">
<div class="form-group col-md-10 m-t-15">
<div class="fg-line">
<select id="selectMaterial" style="width:100%">
<text>
<option value="0" selected="selected"></option>
</text>
</select>
</div>
</div>
<div class="col-md-1 form-group fg-float m-t-10">
<div class="fg-line">
<label>Quantidade</label>
#Html.TextBoxFor(m => m.OrcamentoMaterial.QuantidadeMaterial, new { #class = "form-control fg-input", id = "txtMaterialQuantidade" })
</div>
#Html.ValidationMessageFor(o => o.Material.Nome, "", new { #class = "has-error text-danger" })
</div>
<div class="col-md-1">
<i class="zmdi zmdi-plus"></i>
</div>
</div>
<div class="row" style="font-size: smaller;">
</fieldset>
</div>
<table class="table table-striped" id="tableOrcamentoMaterial">
<thead align="center">
<tr>
<th>Material</th>
<th>Ni</th>
<th>Name</th>
<th>Qtd.</th>
<th>Value</th>
<th>Total</th>
</tr>
</thead>
<tbody class="tbFooterOrcamentoMaterial">
</tbody>
</table>
$("#btn-addOrcamentoMaterial").click(function ()
{
var solicitante = "";
var executor = "";
var descricaoOrcamento = "";
var TecnicoId = 0;
var dataOrcamento = "";
var material = "";
var qtdMaterial = "";
var valorTotal = 0;
var materialId = 0;
var codigoNi = "";
var codigoMaterial = "";
$("#ddlPessoaExecutora option:selected").val() != null ? TecnicoId = $("#ddlPessoaExecutora option:selected").val() : $("#ddlPessoaExecutora option:selected").val(0);
$("#txtPessoaSolicitouOrcamento").val() != null ? solicitante = $("#txtPessoaSolicitouOrcamento").val() : "Não informado";
$("#ddlPessoaExecutora option:selected").text() != "" ? executor = $("#ddlPessoaExecutora option:selected").text() : $("#ddlPessoaExecutora option:selected").val(1);
$("#txtDescricaoOrcamento").val() != null ? descricaoOrcamento = $("#txtDescricaoOrcamento").val() : "Não possui descrição";
$("#txtDataOrcamento").val() != null ? dataOrcamento = $("#txtDataOrcamento").val() : new Date();
$("#selectMaterial option:selected").text() != null ? material = $("#selectMaterial option:selected").text() : $("#selectMaterial option:selected").val(1);
$("#selectMaterial option:selected").val() != null ? materialId = $("#selectMaterial option:selected").val() : $("#selectMaterial option:selected").val(0);
$("#txtMaterialQuantidade").val() != null ? qtdMaterial = $("#txtMaterialQuantidade").val() : "0";
var qryMaterial = getMaterialbyId(materialId);
valor = qryMaterial.vlMaterial;
codigoNi = qryMaterial.CodigoNi;
codigoMaterial = qryMaterial.CodigoMaterial;
valorTotal = parseFloat(qtdMaterial) * valor;
var orcamentoExibir = codigoMaterial + "-" + codigoNi + "-" + material + "-" + qtdMaterial + "-" + valor + "-" + valorTotal;
orcamentoExibir = orcamentoExibir.split("-");
var orcamento = dataOrcamento + " - " + solicitante + " - " + executor + " - " + descricaoOrcamento + " - "+ codigoMaterial + "-" + codigoNi+ "-" + material + " - " + qtdMaterial + " - " + valor + " - " + valorTotal +" - " + TecnicoId +" - " + materialId;
incluirOrcamentoMaterial(orcamento, orcamentoExibir);
$("#ddlPessoaExecutora option:selected").val("");
$("#txtPessoaSolicitouOrcamento").val("");
$("#ddlPessoaExecutora option:selected").val(0);
$("#txtDescricaoOrcamento").val("");
$("#txtDataOrcamento").val("");
$("#selectMaterial option:selected").val(0);
$("#selectMaterial").text("");
$("#txtMaterialQuantidade").val("");
});
function incluirOrcamentoMaterial(orcamento, orcamentoExibir) {
listaOrcamentoMaterial.push(orcamento);
listaOrcamentoMaterialExibir.push(orcamentoExibir);
for (i = 0; i < listaOrcamentoMaterialExibir.length; i++) {
var tr = document.createElement('TR');
tr.class = 'rowOrcamentoMaterial';
i = listaOrcamentoMaterialExibir.length -1;
valorTotalOrcamento = valorTotalOrcamento + parseFloat(listaOrcamentoMaterialExibir[i][5]);
for (j = 0; j < listaOrcamentoMaterialExibir[i].length; j++) {
var td = document.createElement('TD');
td.appendChild(document.createTextNode(listaOrcamentoMaterialExibir[i][j]));
td.class = 'cellOrcamentoMaterial';
tr.appendChild(td)
}
$("#tableOrcamentoMaterial > tbody").append(tr);
}
$("#tableOrcamentoMaterial > tbody > tr").addClass("rowOrcamentoMaterial");
var tt = $(".rowOrcamentoMaterial").children.length;
debugger;
if(!$("#tableOrcamentoMaterial > tfoot .totalOrcamentoMaterial").html()){
$("#tableOrcamentoMaterial").append('<tfoot><tr><td colspan="5"></td><td class="totalOrcamentoMaterial orcamento" style="color:red;">'+ valorTotalOrcamento + '</td></tr></tfoot>');
} else
{
$("#tableOrcamentoMaterial > tfoot .totalOrcamentoMaterial").html(valorTotalOrcamento);
}
};
Put the table on a div element, then give the div a width and a margin for example
<div id="styleExample" style="width:920px; margin:auto">
<table id="yourTable"...></table>
</div>