how to access td without class or id in ganon - php

My table is Like:
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="img src here" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>
I am trying to access plaintext of 3rd <td> (<td>I WANT THIS TEXT</td>).
I am very confused that how to get this.
Please help me


var text = $('.tlr td:nth-child(3)').text();
alert(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="img src here" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>


Following code for get all td datas from clicking any row.
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 2; i < 3; i++) {
data.push(cells[i].innerHTML);
}
}
};


Jeet, you need to use Jquery Selectors... Take a look at the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ready demo</title>
<style>
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
alert($( "table tbody tr td:nth-child(3)" ).text());
});
</script>
</head>
<body>
<table class="tl">
<tbody>
<tr class="tlr">
<td>abcd</td>
<td class="tli"><img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="English" class="icon"></td>
<td>I WANT THIS TEXT</td>
<td class="sn">12</td>
<td class="ln">44</td>
<td><div class="r0"></div></td>
</tr>
</tbody>
</table>
</body>
</html>
Hope this helps...

Related

JQuery Ajax : onchange in cart item should change the total value

i am creating a shopping cart in php jquery , the cart has dropdown options for weight and quantity , i need a solution that change in these dropdowns should change the total price of the product... I did it but the code changes al the columns , i need to change only the price column. any solutions?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>
Total Product

you should modify your code, Use children in your script:
$(this).children('td:nth-child(8)').text(total);
nth-child(8) = 8 is td column value.

Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sum Total for Column in jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var total = [];
$('table thead th').each(function(i) {
total.push(calculateColumn(i));
});
console.log(total);
var totalFruits = 0;
for (var i in total) {
totalFruits += total[i] ;
}
console.log(totalFruits);
$('#total').text('Total: ' + totalFruits);
});
function calculateColumn(index) {
var count = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
count +=value;
}
});
return count;
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<thead>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" id="total">Total:</td>
</tr>
</tfoot>
</table>
</body>
</html>

Jquery table math

I am looking for solution to below issue. I have dynamically created rows in table and they can have similar ids based on part number. I want some simple solution to doing simple math operations with numbers inside table. My table have one Q'ty field which is left for user to fill in, rest should be calculated automatically. Row math and column sums. I am beginner so this is what i came up with.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("[id*='kolicina_']").keyup(function(){
var a = $("[id*='cena_']").text();
var b = $("[id*='kolicina_']").val();
var c = a * b;
var d = c - b;
$("[id*='ukupno_']").html(c);
$("[id*='razlika_']").html(d);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Price</td>
<td>Q'ty</td>
<td>TTL</td>
<td>Difference</td>
</tr>
<tr>
<td id="cena_1234567">2</td>
<td ><input type="text" id="kolicina_1234567"/></td>
<td id="ukupno_1234567"></td>
<td id="razlika_1234567"></td>
</tr>
<tr>
<td id="cena_223421">10</td>
<td ><input type="text" id="kolicina_223421"/></td>
<td id="ukupno_223421"></td>
<td id="razlika_223421"></td>
</tr>
<tr>
<td id="cena_556677">200</td>
<td ><input type="text" id="kolicina_556677"/></td>
<td id="ukupno_556677"></td>
<td id="razlika_556677"></td>
</tr>
<tr>
<td>TTL</td>
<td>TTL</td>
<td>TTL</td>
<td>TTL</td>
</tr>
</table>
</body>
</html>

Note : From your question i think that you want to update the td values only for a single row (means based on the value which you are entering in 2nd column you want to update the calculated values in 3rd and 4th row).
Please check below code
$(document).ready(function(){
$("[id*='kolicina_']").keyup(function(){
var currentRow = $(this).parent().parent();
var td_cena = currentRow.find('td')[0];
var a = $(td_cena).text();
var b = $(this).val();
var c = a * b;
var d = c - b;
var td_ukupno = currentRow.find('td')[2];
var td_razlika = currentRow.find('td')[3];
$(td_ukupno).html(c);
$(td_razlika).html(d);
});
});
Please check this Fiddle.

Here you need to use id starts with selector like $("[id^='kolicina_']") which means grab all the DOM elements whose id starts with kolicina_. Then we search the tr object from where the event got originated and refer to associated DOM elements like below:
$(document).ready(function() {
$("[id^='kolicina_']").keyup(function() {
var trObj = $(this).closest("tr");
var a = parseFloat($(trObj).find("[id^='cena_']").text());
var b = parseFloat($(this).val());
var c = a * b;
var d = c - b;
$(trObj).find("[id^='ukupno_']").html(c);
$(trObj).find("[id^='razlika_']").html(d);
});
});
td {
min-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Price</td>
<td>Q'ty</td>
<td>TTL</td>
<td>Difference</td>
</tr>
<tr>
<td id="cena_1234567">2</td>
<td>
<input type="text" id="kolicina_1234567" />
</td>
<td id="ukupno_1234567"></td>
<td id="razlika_1234567"></td>
</tr>
<tr>
<td id="cena_223421">10</td>
<td>
<input type="text" id="kolicina_223421" />
</td>
<td id="ukupno_223421"></td>
<td id="razlika_223421"></td>
</tr>
<tr>
<td id="cena_556677">200</td>
<td>
<input type="text" id="kolicina_556677" />
</td>
<td id="ukupno_556677"></td>
<td id="razlika_556677"></td>
</tr>
<tr>
<td>TTL</td>
<td>TTL</td>
<td>TTL</td>
<td>TTL</td>
</tr>
</table>

Change the js like this
$(document).ready(function(){
$("[id*='kolicina_']").keyup(function(){
var clickid = $(this).attr('id') ;
var main = $(this).attr('id').slice(9);
var a = $('#cena_'+main).text();
var b = $('#kolicina_'+main).val();
var c = a * b;
var d = c - b;
$('#ukupno_'+main).html(c);
$('#razlika_'+main).html(d);
});
});

excel copy paste to web page and flatten table

Im looking for a way to flatten table while copying from Excel to web page. Biggest problem is that in my table I have multiple headers. I'm using this code for copy paste to transform my table as HTML table but I'm stuck on how to proceed.
Main idea is that I have lot of older information which need to be imported to database and for this still even copy paste version as the code below is workable for the moment if just get the data in right format. Also solution as in here: http://jsfiddle.net/duwood/sTX7y/ could be workable.
Current output:
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>34B</td>
<td>36B</td>
<td>38B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>50-506</td>
<td>xxx</td>
<td>BLANCO</td>
<td>2475</td>
<td>2835</td>
<td>3190</td>
<td>PCS</td>
<td>$1.41</td>
</tr>
<tr>
<td>50-506</td>
<td>xxx</td>
<td>NEGRO</td>
<td>1750</td>
<td>2000</td>
<td>2250</td>
<td>PCS</td>
<td>$1.41</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>34B</td>
<td>36B</td>
<td>38B</td>
<td></td>
<td></td>
</tr>
<tr>
<td>50-530</td>
<td>yyy</td>
<td>BLANCO</td>
<td>195</td>
<td>390</td>
<td>515</td>
<td>PCS</td>
<td>$2.26</td>
</tr>
<tr>
<td>50-530</td>
<td>yyy</td>
<td>BEIGE</td>
<td>95</td>
<td>195</td>
<td>260</td>
<td>PCS</td>
<td>$2.26</td>
</tr>
</tbody>
</table>
Desired output:
<table>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>34B</td><td>2475</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>36B</td><td>2475</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>50-506</td><td>xxx</td><td>BLANCO</td><td>38B</td><td>2835</td><td>pcs</td><td>$1.41</td></tr>
<tr>
<td>etc</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
Current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('textarea[name=excel_data]').keyup(function() {
var data = $(this).val();
var rows = data.split("\n");
var table = $('<table />');
for(var y in rows) {
var cells = rows[y].split("\t");
var row = $('<tr />');
for(var x in cells) {
row.append('<td>'+cells[x]+'</td>');
}
table.append(row);
}
$('#excel_table').html(table);
});
});
</script>
</head>
<body>
<textarea name="excel_data" /></textarea>
<div id="excel_table"></div>
</body>
</html>

How to get selected td value

I have a table with the image and image code data, show on code below:
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr id="image_info">
<td id="1W 1111">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td id="2W 2222"></td>
<td id="3W 3333"></td>
</tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
</tbody>
</table>
I tried using this code to get the html of selected td of the table. But it show "undefined".
$('#tblForklift').on('click', function(e) {
var forkliftCode = $('this').closest('tr').find('td').html();
alert(forkliftCode)
});

Since #tblForklift will match your table. You need to target td elements inside this table instead. Also if your elements has been added dynamically to the DOM, you can use event delegation:
$(document).on('click', '#tblForklift tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
or better if your table is not added dynamically:
$('#tblForklift').on('click', 'tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
Also some of your td are missing closing </td>

Add event to the td. so in each td click you can get html.
$('#tblForklift td').on('click',function(e) {
alert($( this ).html());
});
demo

id must be unique use class like,
HTML
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr class="image_info">
<td class="1W 1111 forklift">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td class="2W 2222"></td>
<td class="3W 3333"></td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
SCRIPT
$('.forklift').on('click', function(e) { // using class for multiple tds
var forkliftCode = $(this).find('p').text();
alert(forkliftCode);
});
Also, never give a space in a id, space has a different meaning in jquery selectors
Live Demo

HTML:
<td class="2W 2222">cvbcxbcvb</td>
<td class="3W 3333">bcvbcvbnvnv</td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
jQuery:
$('#tblForklift td').click(function() {
alert($(this).html());
});

Sort table with jQuery

How can I sort this foreach loop with jQuery? I will sort on id but I don't now how to do that.
<form id="fileForm" action="#" enctype="multipart/form-data" method="get">
<table cellpadding="2" cellspacing="0" width="100%" class="grid">
<tr>
<th>ID:</th>
<th>Time:</th>
<th>Location:</th>
<th>From IP:</th>
<th>Title (url):</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>12:00</td>
<td>Utrecht</td>
<td>192.019.192.00</td>
<td>site</td>
</tr>
</table>
</form>

http://datatables.net/ - is a client side JQuery plugin which will allow you to sort/paginate etc the final HTML that your PHP renders.
I would tend to use a server-side solution though if you have 1000s upon 1000s of rows as the time it takes to initially render the page would be very long.

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});
</script>
You can also find more info abbout this plugin on jQuery TableShorter

here is another simple sort table using php code:
make a your-file.php, insert the below code, and upload to your folder. (this example is a very simple table for sorting and processing simple values, using this sortable.js script )
<html><head>
<script src="sorttable.js"></script>
<style>
tbody tr td {color:green;border-right:1px solid;width:200px;}
</style>
</head><body>
<?php
$First = array('a', 'b', 'c', 'd');
$Second = array('1', '2', '3', '4');
if (!empty($_POST['myFirstvalues']))
{ $First = explode("\r\n",$_POST['myFirstvalues']); $Second = explode("\r\n",$_POST['mySecondvalues']);}
?>
</br>Hi User. PUT your values</br></br>
<form action="" method="POST">
projectX</br>
<textarea cols="20" rows="20" name="myFirstvalues" style="width:200px;background:url(untitled.PNG);position:relative;top:19px;Float:left;">
<?php foreach($First as $vv) {echo $vv."\r\n";}?>
</textarea>
The due amount</br>
<textarea cols="20" rows="20" name="mySecondvalues" style="width:200px;background:url(untitled.PNG);Float:left;">
<?php foreach($Second as $vv) {echo $vv."\r\n";}?>
</textarea>
<input type="submit">
</form>
<table class="sortable" style="padding:100px 0 0 300px;">
<thead style="background-color:#999999; color:red; font-weight: bold; cursor: default; position:relative;">
<tr><th>ProjectX</th><th>Due amount</th></tr>
</thead>
<tbody>
<?php
foreach($First as $indx => $value) {
echo '<tr><td>'.$First[$indx].'</td><td>'.$Second[$indx].'</td></tr>';
}
?>
</tbody>
<tfoot><tr><td>TOTAL = <b>111111111</b></td><td>Still to spend = <b>5555555</b></td></tr></tfoot></br></br>
</table>
</body>
</html>

I really like this simple solution from Nick G at jQuery table sort
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }

Categories