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);
}
Related
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
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>
I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?
I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});
Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});
Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!
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.