How can I make each row clickable without repeating
This one is an example that shows the problem, parameter could be the code:
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr>
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr>
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
Thanks
Excuse me for my English, I hope that you understand the problem.
There are a few different ways to achieve this. Here are a couple using plain javascript and one using jQuery.
Plain JS
With plain javascript with just use the onclick parameter. Pretty straight forward.
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr onclick="window.location='page/parameter1';">
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr onclick="window.location='page/parameter2';">
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
</table>
jQuery
With jQuery you add a class so you can use that as the selector. There is also a data-href parameter that will hold the URL you want the user to go to when they click the row.
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr class="clickable" data-href="page/parameter1">
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr class="clickable" data-href="page/parameter2">
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
$("tr.clickable").click(function() {
window.location = $(this).data("href");
});
});
</script>
Your code should look like :
<table>
<thead>
<tr>
<th>Code</th>
<th>User</th>
...
</tr>
</thead>
<tbody>
<tr>
<td> 123 </td>
<td> User A </td>
...
</tr>
<tr>
<td> 456 </td>
<td> User B </td>
...
</tr>
</tbody>
Added end tag </a>
Related
I need to retrieve confused html from a mail. so I have done it before using the class but here is different...so I need the part in the table---td-div with the details about the module subsciber. but before this table you have others. here is the html:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div>Nome: GIANCARLO</div>
</td>
</tr>
<tr>
<td>
<div>Cognome: CANNONE</div>
</td>
</tr>
<tr>
<td>
<div>Codice Fiscale: CNNGCR65T01A285W</div>
</td>
</tr>
<tr>
<td>
<div>Email: giancarlocannone#hotmail.com</div>
</td>
</tr>
</tbody>
</table>
My table is here http://jsfiddle.net/wqk7Lauz/
All I need is to have all values from td:nth-of-type(3) multiplied with 3.8 on page load.
HTML
$('td:nth-of-type(3)').text(parseFloat($('td:nth-of-type(3)').text()) * 3.8)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
You're very close, you just need to use the callback version of text so you're only handling the text of each individual element, and remove the R$ at the beginning:
$('td:nth-of-type(3)').text(function() {
return parseFloat($(this).text().replace("R$", "")) * 3.8;
});
Example:
$('td:nth-of-type(3)').text(function() {
return parseFloat($(this).text().replace("R$", "")) * 3.8;
});
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to add back the R$, and perhaps limit the result to a specific number of places, you can do that with string concatenation and toFixed:
$('td:nth-of-type(3)').text(function() {
return "R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2);
});
Example:
$('td:nth-of-type(3)').text(function() {
return "R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2);
});
<table class="table table-bordered mydatatable table-hover display responsive nowrap">
<tbody>
<tr>
</tr>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Preço por 1000</th>
<th>Quantidade mínima</th>
<th>Quantidade máxima</th>
<th>Descrição</th>
</tr>
<tr>
<td>9</td>
<td>Product </td>
<td>
R$1.86
</td>
<td>100</td>
<td>10000</td>
<td>S1 </td>
</tr>
<tr>
<td>10</td>
<td>Product </td>
<td>
R$3.98
</td>
<td>1000</td>
<td>100000</td>
<td>S1</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hi change your script function with this
$(".table tr td:nth-child(3)").each(function(){ //Loop
//alert($(this).text())
var thrdtd = $(this).text(); //Getting value of td
onlyno = thrdtd.replace('R$', ''); // Removing R$
//akert(thrdtd);
$(this).text('R$ '+ parseFloat(onlyno * 3.8).toFixed(2)) // Adding R$ and also multiplying at the same time and update that result to td again
});
In this first i am getting value of every third td value through loop
$(".table tr td:nth-child(3)").each(function(){
and then removing character from it before multiplying and then after multiplying i am updating the same td value
You can use the below code:
$('td:nth-of-type(3)').text("R$" + (parseFloat($(this).text().replace("R$", "")) * 3.8).toFixed(2));
this is my table -
<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
and I want to remove this one table row:
<tr>
<td> </td>
</tr>
my expected output is:
<table>
<tr>
<td>ABC</td>
</tr>
</table>
is it possible??please help me
As you have tagged your question with the tag php i would recommend using a regular expression.
The pattern \s*<tr>\s*<td> <\/td>\s*<\/tr> will find the tr with an empty ( ) td.
To test and look into the regex you can have a look here: https://regex101.com/r/ax6Xdg/1
Put together this will look something like this:
$table = "<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>";
$pattern = "/\s*<tr>\s*<td> <\/td>\s*<\/tr>/";
var_dump( preg_replace( $pattern , "" , $table ) );
This will output something very simmilar to this:
string '<table>
<tr>
<td>ABC</td>
</tr>
</table>' (length=60)
You can do this by using JQuery function .remove(). You can look it up here
Edit: If you want to locate that specific tag, you can do that by using .next()read here, .find() read here,.parent()read here, .children read here
Just add id to your table :
<table id="tableid">
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
This script find , if found then remove !
$('#tableid tr').each(function() {
if ($(this).find('td').html()==' ') $(this).remove();
});
If you want to find some text and then remove then replace html() with text()
$('#tableid tr').each(function() {
if ($(this).find('td').text()=='ABC') $(this).remove();
});
You should try this:
<table>
<tr id="abc>
<td>ABC</td>
</tr>
<tr id="remove">
<td> </td>
</tr>
<script>
$('#remove').remove();
</script>
When rendering the table, add a unique class for the rows you wish to delete. Lets say the class is: _rowToDelete, and then using jQuery, remove all the rows that have this class.
In the below example, when you click on the button the rows are being removed, so you can see the changes. But you can do the same on page load if you wish so.
$(function() {
$("#removeBtn").click(function() {
$("._rowToDelete").remove() ;
});
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC 1</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 2</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 3</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
</table>
Remove
I've been struggling with this for around 4 hours now...
What I'm trying to establish is pretty simple, I have a news table, I want to display the title of the news, the content, and a read more link, I know how to loop through a table and force , but this won't work in my case, the table should look like this in the end:
<table>
<tr>
<td>header one</td>
<td>header 2</td>
<td>header 3</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td>text one</td>
<td>text two</td>
<td>text 3</td>
</tr>
<tr>
<td>read more</td>
<td>read more </td>
<td>read more</td>
</tr>
</table>
What I have so far in my php is a code that will generate the rows and columns, but I want them to be distributed just like the sample table above in order not to mess the alignment of the text and the read more link ...
Here's my php code :
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<?php while ($record = mysql_fetch_assoc($result)): ?>
<?php $style++ ?>
<td width="33%" valign="top">
<h6><?php echo $record['title'] ?></h6>
<div class="service-sum"><?php echo $record['content'] ?></div>
<div class="findout">> find out more</div>
</td>
<?php if ($style == 3): ?>
</tr>
<?php $style = 0; ?>
<tr>
<td>
<div style="height:30px;"></div>
</td>
</tr>
<tr>
<?php endif ?>
<?php endwhile ?>
This one is working fine, but i'm displaying the title and the content and the read more link in one column, these should be distributed into 3 for design purposes...
Any help would be much appreciated, I looked all over the net and I can't find a solution for that!
try using this alignment. The design is almost same as yours.
<table>
<tr>
<td>
<table>
<tr>
<td>header one</td>
</tr>
<tr>
<td>text one</td>
</tr>
<tr>
<td>read more</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>header 2</td>
</tr>
<tr>
<td>text 2</td>
</tr>
<tr>
<td>read more</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>header 3</td>
</tr>
<tr>
<td>text 3</td>
</tr>
<tr>
<td>read more</td>
</tr>
</table>
</td>
</tr>
</table>
if there are only 3 records, the following should be fine. if there are more, some changes should be made. Please check your php code.
<table>
<tr>
<?php while ($record = mysql_fetch_assoc($result)) { ?>
<td>
<table>
<tr>
<td><?php echo $record['title'] ?></td>
</tr>
<tr><td height = "30px;"></td></tr>
<tr>
<td><?php echo $record['content'] ?></td>
</tr>
<tr>
<td>> find out more</td>
</tr>
</table>
</td>
<?php } ?>
</tr>
</table>
i'm learning Regex but can't figure it out.... i want to get the entire HTML from a DIV, how to procced?
already tried this;
/\< td class=\"desc1\"\>(.+)/i
it returns;
Array
(
[0] => < td class="desc1">
[1] =>
)
the code that i'm matching is this;
<table id="profile" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th colspan="2">Jogador TheInFEcT </th>
</tr>
<tr>
<td>Detalhes</td>
<td>Descrição:</td>
</tr>
</thead><tbody>
<tr>
<td class="empty"></td><td class="empty"></td>
</tr>
<tr>
<td class="details">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<th>Classificação</th>
<td>11056</td>
</tr>
<tr>
<th>Tribo:</th>
<td>Teutões</td>
</tr>
<tr>
<th>Aliança:</th>
<td>-</td>
</tr>
<tr>
<th>Aldeias:</th>
<td>1</td>
</tr>
<tr>
<th>População:</th>
<td>2</td>
</tr><tr>
<td colspan="2" class="empty"></td>
</tr>
<tr>
<td colspan="2"> » Alterar perfil</td>
</tr>
</tbody></table>
</td>
<td class="desc1">
<div>STATUS: OFNAaaaAA</div>
</td>
</tr>
</tbody>
</table>
i need to get the entire code inside the < td class="desc1">, like that;
<div >STATUS: OFNAaaaAA< /div>
</td>
</tr>
</tbody>
</table>
Could someone help me out?
Thanks in advance.
I usually use
$dom = DOMDocument::load($htmldata);
for converting HTML code to XML DOM. And then you can use
$node = $dom->getElementsById($id);
/* or */
$nodes = $dom->getElementsByTagName($tag);
to get your HTML/XML node.
Now, use
$node->textContent
to get data inside node.
try this, it does not cover all possible cases but it should work:
/<td\s+class=['"]\s*desc1\s*['"]\s*>((.|\n)*)<\/td>/i
tested with: http://www.pagecolumn.com/tool/pregtest.htm
edit: improved solution suggested by Alan Moore
/<td\s+class=['"]\s*desc1\s*['"]\s*>(.*?)<\/td>/s