im trying to make a task manger based on web system that can monitor tasks at work , im using html and php .
im trying to show all the tasks in table and when i click on a task (row) i want to get a hidden td value (id of task) and send it as arg to another page for more information about the task .
i searched the web how can i do that , but i didnt realy understand how to do it with my table .
here is my table code
<table id="thickets_show">
<tr id="show_ticket_table_header">
<td>Work Week</td>
<td>Task Submited Date</td>
<td>Task Submited Time</td>
<td>Task</td>
<td>Project</td>
<td>Task Owner</td>
<td>Task Assigend to</td>
<td>Priority</td>
<td>Status</td>
<td>Task Total Work Time</td>
<td>Task Due Date</td>
<td>Task Finish Date</td>
<td>Team</td>
</tr>';
foreach ($tasks as $key => $value) {
if ($value['ticket_status']=="done")
echo '<tr id="done_ticket" >';
elseif ($value['ticket_priority']=="high")
echo '<tr id="high_ticket" class="ticket_raw">';
else
echo '<tr class="ticket_raw">';
echo '
<td>
'.$value['work_week'].'
</td>
<td>
'.$value['ticket_date'].'
</td>
<td>
'.$value['ticket_time_submit'].'
</td>
<td>
'.$value['ticket_request'].'
</td>
<td>
'.$value['ticket_project'].'
</td>
<td>
'.$value['ticket_onwer'].'
</td>
<td>
'.$value['ticket_assigned_user'].'
</td>
<td>
'.$value['ticket_priority'].'
</td>
<td>
'.$value['ticket_status'].'
</td>
<td>
'.$value['ticket_worktime'].'
</td>
<td>
'.$value['ticket_due_date'].'
</td>
<td>
'.$value['ticket_finish_date'].'
</td>
<td>
'.$value['team'].'
</td>
<td style="display:none;" id="ticket_id class="divOne">
'.$value['id'].'
</td>
</tr>
this is the function that im using
$(function(){
$(".ticket_raw" ).on(\'click\',function(e){
e.preventDefault();
var id = $(this).attr("#ticket_id");
alert(id);
});
});
There is a small issue to correct, then you can make this work nice and easily:
echo '<tr id="done_ticket" >'; is invalid - if you're creating multiple elements in a loop like this, you can't give them all the same "id", that's illegal in the HTML specification. You have to use classes instead.
Rewrite it slightly like this:
foreach ($tasks as $key => $value) {
echo '<tr data-id="'.$value['id'].'" class="ticket ';
if ($value['ticket_status']=="done")
echo 'done_ticket';
elseif ($value['ticket_priority']=="high")
echo 'high_ticket ticket_raw';
else
echo 'ticket_raw';
echo '">';
echo '
<td>
//etc...
Note the extra class "ticket" on the tr element, regardless of the status, and the "data-id" attribute containing the ID (instead of a hidden field).
Now, you can write some jQuery to get the ticket ID:
$(".ticket").click(function(event) {
var id = $(this).data("id"); //gets the data-id value from the clicked tr
window.location.href = "ticket.php?id=" + id; //example URL to redirect to, passing the ID from the tr
});
Lastly you can delete this code:
<td style="display:none;" id="ticket_id class="divOne">
'.$value['id'].'
</td>
The td has the id ticket_id, so you can use document.getElementById():
var td = document.getElementById('ticket_id');
var value = td.textContent;
Or, using jQuery:
var td = $('#ticket_id');
var value = td.text();
$('tr').on('click',function(){
var hidden_items = $(this).find('.td_hidden');
$.each(hidden_items,function(k,v){
console.log($(v).text());
})
})
html,body{
height: 100%;
margin: 0 auto;
padding: 0px;
}
td{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<table>
<tr>
<td>COLUMN1</td>
<td>COLUMN2</td>
<td>COLUMN3</td>
<td>COLUMN4</td>
</tr>
<tr>
<td>VALUE01</td>
<td>VALUE02</td>
<td>VALUE03</td>
<td>VALUE04</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_01</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_02</td>
</tr>
<tr>
<td>VALUE11</td>
<td>VALUE12</td>
<td>VALUE13</td>
<td>VALUE14</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_11</td>
<td style="display:none;" class="td_hidden">VALUE_HIDDEN_12</td>
</tr>
</table>
</body>
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>
I have got a problem. I need to add lines in the table and give the numbered classes, like name_4, name_5 and so on using javascript or jquery.
<body>
<form action="" method="post">
<button>Добавить</button>
<input type="submit" value="Подтвердить">
<table>
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
<script>
$(document).ready(function() {
$("button").click(function(){
var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
$("table").append(line)
$("tr:last").hide()
$("tr:last").fadeToggle(1000)
});
});
</script>
Get the length of tr using $("#tableId tr).length and add 1 to it
$(document).ready(function() {
$("button").click(function(e) {
e.preventDefault();
let getTRLength = $("#myTable tr").length + 1;
var line = "<tr><td class='name_" + getTRLength + "'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
$("table").append(line)
$("tr:last").hide()
$("tr:last").fadeToggle(1000)
});
});
.name_3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<button>Добавить</button>
<input type="submit" value="Подтвердить">
<table id="myTable">
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
Your code doesn't work because you didn't specify the button type attribute. Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
If your buttons are not to submit form data to a server, be sure to set their type attribute to button. Otherwise they will try to submit form data and to load the nonexistent response, possibly destroying the current state of the document.
$( document ).ready( function() {
$( 'button' ).click( function() {
var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>";
$( 'table' ).append( line );
$( 'tr:last' ).hide().fadeToggle( 1000 )
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<button type="button">Добавить</button>
<input type="submit" value="Подтвердить">
<table>
<tr>
<td class='name_1'>ФИО</td>
<td class='subj1_1'>1-ый предмет</td>
<td class='subj2_1'>2-ой предмет</td>
<td class='subj3_1'>3-ий предмет</td>
</tr>
<tr>
<td class='name_2'>text</td>
<td class='subj1_2'>text</td>
<td class='subj2_2'>text</td>
<td class='subj3_2'>text</td>
</tr>
</table>
</form>
I'm writing wysiwyg editor (iframe in designmode), and I can't find good right code to operate with table. Not simple table where any cells have rowspan or colspan is 1! I mean about hard table variant, like this:
<table border=1>
<tr>
<td rowspan=2 colspan=2 width=60px height=60px> </td>
<td height=30px width=30px> </td>
</tr>
<tr>
<td rowspan=2 width=30px height=60px> </td>
</tr>
<tr>
<td height=30px width=30px> </td>
<td height=30px width=30px> </td>
</tr>
</table>
Any code I was found is only for simple tables. For example, this is code for insert rows and it do that wrong:
var cell = select.current;
var row = cell.closest('tr');
var table = row.closest('table');
row.after('<tr></tr>');
var row_new = row.next();
row.children().each(function()
{
var cs = $(this).prop('colSpan');
if ( cs == 1 )
{
row_new.append('<td> </td>');
}
else
{
row_new.append('<td colspan=' + cs + '> </td>');
}
});
I think the right code maybe will analyze all table rows and change rowspan values and etc.
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 problem in my jquery/code where the id's capturing with my jquery code is an array.
Here's the snippet code.
Here's my jquery.
<script type="text/JavaScript">
$(document).ready(function()
{
$('input').keyup(function()
{
$('.total_fabi').each(function() {
var answer = parseFloat($('.req').val()) * parseInt($('.was_perc').val());
$('.total_fabi').html(answer);
});
});
});
Here's the html generated code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<!-- This values are SQL generated inside While.. -->
<!-- Values generated by sql are under Description, Estimated Cost, Wastage-->
<!-- i Need to calculate the total using keyup by multiplying req'd qty * wastage% -->
<tr bgcolor='#FFF'>
<td>FABRICATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='7' class='was_perc'>7</td>
<td align='right'>
<font color='#900'>
<span id='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<tr bgcolor='#E3E4FA'>
<td>INSTALLATION PER LM</td>
<td align='center'>200</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='15' class='was_perc'>15</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>
</tr>
<!-- Here's the while Ends..--->
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<!-- This part where $total+=$total_fabi -->
</td>
</tr>
</tbody>
</table>
Here's the actual PHP code.
<table align='center' width='100%' border='1'>
<thead style='background-color: #900; color: #FFF;'>
<th>Description</th>
<th>Estimated Cost</th>
<th>Req'd Qty</th>
<th>Wastage %</th>
<th>Total</th>
</thead>
<tbody>
<?php
$total_non = 0;
$sel_fabi = mysql_query("SELECT * FROM tbllabor") or die (mysql_error());
while($non = mysql_fetch_array($sel_fabi)){
$desc_fabi = $non['desc'];
$est_cost = $non['est_cost'];
$was_perc = $non['wastage_perc'];
$was_perc = $was_perc * 100;
//$total_fabi = $req * $was_perc;
echo "<tr bgcolor='".$colors[$c++ % 2]."'>";
echo " <td>$desc_fabi</td>
<td align='center'>$est_cost</td>
<td align='center'><input type='text' size='3' name='req[]' class='req'></td>
<td align='center'><input type='hidden' name='was_perc[]' value='$was_perc' class='was_perc'>$was_perc</td>
<td align='right'>
<font color='#900'>
<span class='total_fabi'>0</span>
<input type='hidden' name='total_fabi' id='total_fabi' style='border: none;' size='6' readonly='readonly'>
</font>
</td>";
echo "</tr>";
}
?>
<tr>
<td colspan='4' align='right'>Total Fabrication & Installation</td>
<td align='right'>
<input type='hidden' value='<?php echo $total_non;?>'>
<?php echo $total_non;?>
</td>
</tr>
</tbody>
</table>
.each() function is not working with me. with this kind of code i stated. do you have any other option where i should use keyup or keydown to calculate the total i needed.. Thanks in advance..
id values must be unique on the page, you can't have more than one element with the same id. That's the fundamental problem.
You can change your id values to class values instead.
It's hard to tell exactly what you're trying to do, but if the goal is to update the total_fabi element within the same row each time a req or was_perc element changes:
$(document).ready(function()
{
$('input').keyup(function()
{
// Find the row (if any) containing this input
var $tr = $(this).closest("tr");
// Find the .req, .was_perc, and .total_fabi elements *within* this row
var $req = $tr.find(".req");
var $was_perc = $tr.find(".was_perc");
var $total_fabi = $tr.find(".total_fabi");
// Do the update (probably better to use `text` than `html`)
$total_fabi.text(parseFloat($req.val()) * parseInt($was_perc.val()));
});
});
Re your comment below:
sir how would i get the total computed generated by $total_fabi for my overall total? in php its just like $total += $total_fabi.. How can i do this in jquery?
You can do that with each:
var total = 0;
$(".total_fabi").each(function() {
total += parseFloat($(this).text());
});
First of all you need to know that ID attribute must be unique and you defined same ID many time.
You can use class instead of ID attribute.