I want to make a dropdown list using insertAdjacentHTML, but there is a problem with determining where to insert a variable. When you click on any of the buttons, the value is inserted into the first row, although you need to make sure that it is inserted into the selected row
function walletRowTemplate(adress, passPhrase, maticBalance, avaxBalance, trxBalance, ftmBalance, bnbBalance, ethBalance, usdBalance) {
return `<tr id="ETH_${adress}" class="walletTableRow">
<td class="wallet_num"></td>
<td class="wallet_phrase">
<span>${passPhrase}</span>
<button onclick="copyToClipboard('${passPhrase}')"title="Копировать"><img src="public/icons/copy.png"></button>
</td>
<td class="wallet_MATIC_balance">${maticBalance}</td>
<td class="wallet_AVAX_balance">${avaxBalance}</td>
<td class="wallet_TRX_balance">${trxBalance}</td>
<td class="wallet_SOL_balance">0</td>
<td class="wallet_FTM_balance">${ftmBalance}</td>
<td class="wallet_BNB_balance">${bnbBalance}</td>
<td class="wallet_ETH_balance">${ethBalance}</td>
<td class="wallet_USD_balance">${usdBalance}$</td>
<td class="wallet_actions">
<button onclick="updateWalletBalance('${adress}')"><img src="public/icons/magnifier.png"></button>
</td>
</tr>`
}
function copyToClipboard(passPhrase) {
query('#walletListTable tr .wallet_phrase').insertAdjacentHTML('beforeend', `<li>${passPhrase}</li>`)
}
enter image description here
Related
I have a basic CRUD situation, where in the form, when I send the data, it inserts the mask normally, and when sending it to my local API, I format it and leave it in numeric format. But how am I going to apply the mask again on the item being displayed in a grid?
in my form, is like this
and on the grid, it displays like this
now, I need to apply the mask again, but on the grid that is showing. How to make?
to show the items on the grid, I am doing this via Javascript:
const exibirEmpresas = (u) => {
Array.from(u).forEach((lista) => {
dadosEmpresa += `
<tr>
<td class="idEmp" id="idEmp">${lista.idEmpresa}</td>
<td class="nomeEmp">${lista.nomeEmpresa}</td>
<td class="emailCad">${lista.email}</td>
<td class="cnpjCad" id="cnpjList">${lista.cnpj}</td>
<td class="dataCadastroCad">${lista.dataCadastro}</td>
<td class="dataAtualizacaoCad">${lista.dataAtualizacao}</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
`;
});
listaEmpresa.innerHTML = dadosEmpresa;
};
// GET
fetch(urlAPI)
.then((s) => s.json())
.then((dados) => exibirEmpresas(dados));
I understand that you are essentially looking for a way to turn a 14-digit string like "19879847984784" to "19.879.847/9847-84".
You can add this JavaScript code to your script. The HTML is just an example with hard coded values.
function formatCnpj() {
for (let td of document.querySelectorAll(".cnpjCad")) {
td.textContent = td.textContent
.replace(/\D/g, "")
.replace(/(..)(...)(...)(....)/, "$1.$2.$3/$4-");
}
}
formatCnpj();
table { border-collapse: collapse }
td, th { border: 1px solid }
<table>
<tr>
<td class="idEmp" id="idEmp">28</td>
<td class="nomeEmp">John Larkin</td>
<td class="emailCad">john.larkin#x.com</td>
<td class="cnpjCad" id="cnpjList">19961423596110</td>
<td class="dataCadastroCad">2000-09-09</td>
<td class="dataAtualizacaoCad">2020-09-09</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
<tr>
<td class="idEmp" id="idEmp">12</td>
<td class="nomeEmp">Helene Park</td>
<td class="emailCad">helene.park#n.com</td>
<td class="cnpjCad" id="cnpjList">19879847984784</td>
<td class="dataCadastroCad">2000-01-01</td>
<td class="dataAtualizacaoCad">2020-01-01</td>
<td>
<button id="atualiza-empresa" onclick="editItem(${lista.idEmpresa})">Editar</button>
</td>
<td>
<button class="deletebtn" onclick="removeItem(${lista.idEmpresa})">Excluir</button>
</td>
</tr>
</table>
If I have this:
<td name="id1">First</td> <button>btn1</button>
<td name="id2">Second</td> <button>btn2</button>
<td name="id3">Third</td> <button>btn3</button>
<td name="id4">Fourth</td> <button>btn4</button>
I want if I click (btn1) the form send to my controller and then I can have (id2)
the ids generated by database so I don't know what is the number, how can I get the number by clicking the same side button?
Instead of using name, use ID
<td id="id1">First</td> <button>btn1</button>
<td id="id2">Second</td> <button>btn2</button>
<td id="id3">Third</td> <button>btn3</button>
<td id="id4">Fourth</td> <button>btn4</button>
Then use JavaScript like so:
document.getElementById('id1').innerHTML; // this is the value
or
document.getElementById('id1').id; // this is the value
or
document.getElementById('id1').value; // this is the value
To make the button work:
<td id="id1">First</td> <button id='btn1' onclick="handleButton(this);">btn1</button>
<td id="id2">Second</td> <button id='btn2'onclick="handleButton(this);">btn2</button>
<td id="id3">Third</td> <button id='btn3'onclick="handleButton(this);">btn3</button>
<td id="id4">Fourth</td> <button id='btn4'onclick="handleButton(this);">btn4</button>
The JavaScript function:
function handleButton(obj) {
alert('You clicked: ' + obj.id);
}
I have a situation here, I need to calculate tax on the basis of an input using JavaScript. Here is the code:
PHP CODE:
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Tax(%)</td>
<td class="total-value"><textarea id="txp">0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Taxes</td>
<td class="total-value"><div id="tax">$0.00</div></td>
</tr>
JavaScript code:
function update_tax() {
var txc = $("txp").val() * $("#subtotal").val() / 100;
$("#tax").html(txc);
}
$("#txp").blur(update_tax);
But the function is not working. Can anyone please help me with why this is not working?
Change
<td class="total-value"><div id="subtotal">$0.00</div></td>
to :
<td class="total-value">$<span id="subtotal">0.00</span></td>
and your code to:
$(document).ready(function(){
function update_tax() {
var txc = parseFloat($("#txp").val()) * parseFloat($("#subtotal").text()) / 100;
$("#tax").html("$"+txc);
}
$("#txp").blur(update_tax);
});
Now the code starts executing when the page has fully loaded. I moved the $-sign from the div and changed the div to a span (inline). So $ and value appear on the same line.
In the multiplying function I used parseFloat to convert any string to a float. The content from the textarea can be retrieved using jQuery val() the content of the span using text(). Also in the function you used txp as a selector, which will refer to a node with the name txp. Updated it to #txp to select the element with id: txp.
I want to know how to retain values clicked and get more with my keyboard to make a word as opposed to one single letter?
function f(i) {
document.getElementById('txt').value
= (document.getElementById(i).firstChild.nodeValue);
<td id='i1' onclick='f("i1");' class='big'>A</td>
<td id='i2' onclick='f("i2");' class='big'>B</td>
<td id='i3' onclick='f("i3");' class='big'>C</td>
<td id='i4' onclick='f("i4");' class='big'>D</td>
<td id='i5' onclick='f("i5");' class='big'>E</td>
<td id='i6' onclick='f("i6");' class='big'>F</td>
<td id='i7' onclick='f("i7");' class='big'>G</td>
<td id='i8' onclick='f("i8");' class='big'>H</td>
<td id='i9' onclick='f("i9");' class='big'>I</td>
<td align='center' bgcolor='red' colspan=3> <input type='text' id='txt'></td>
You probably want to change the = for += to append the pressed value, instead of just replacing it.
The code below shows a rendered HTML (from Compiled ASP .Net code). I would not be able to make any changes to it including adding new attributes like ID.
I could still do something with Javascript but because there is no unique ID for the column, I could not replace the underscore text "____________" with some other text.
The plan is to replace the underscore in column 3 for each row with some other text. Is there a way to identify Column 3 with Javascript?
Thank you.
<table width='100%'>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 1
</td>
<td align="left" valign="top" class='clsReadOnly'>
abc
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 2
</td>
<td align="left" valign="top" class='clsReadOnly'>
def
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
<tr>
<td align="left" valign="top" class='clsReadOnly'>Row 3
</td>
<td align="left" valign="top" class='clsReadOnly'>
ghi
</td>
<td align="left" valign="top" class='clsReadOnly'>
__________________________
</td>
</tr>
</table>
If this is the only table on the page, you can do it with jQuery:
$('table')
.children('tr')
.each(function() {
$(this).children('td:last').html('<p>A Paragraph of Text</p>');
});
It depends on what you are trying to accomplish. If this is how your table will always look, you could do the following:
var cells = document.getElementsByClassName('clsReadOnly');
cells[2].innerHTML = "Row1 Column3";
cells[5].innerHTML = "Row2 Column3";
cells[8].innerHTML = "Row3 Column3";
If you don't know how many columns you will start with, you would have to do this:
var rows = document.getElementsByTagName('tr');
for (var i=0; i<rows.length; i++) {
var cells = rows[i].getElementsByTagName('td');
cells[2].innerHTML = 'Row'+(i+1)+' Column3';
}
jQuery would make this much easier, as you can select by tag, by parent, etc. Of course, you can do all of this in plain JavaScript, but it takes a lot more work.
http://jsfiddle.net/bShZa/
getElementsByClassName() is HTML5 and is not currently supported in IE. Here is the jsfiddle for the solution http://jsfiddle.net/V38MF/2/ w/o jQuery needed
var myTable = document.getElements('td');
for(var i=0; i<myTable.length; i++){
if((i+1)%3 == 0)
console.log(myTable[i].innerHTML);
}