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>
Related
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>
I have table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>
I need: where empty row with product (where product's name is empty) delete this row and move service to up product row and delete current service from up product. Example:
In this table we have product 1. I need remove S11 and paste: S13 and S14 in single row.
I need this table on result:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table-bordered" width="100%">
<tr>
<th>Product</th>
<th>Service</th>
</tr>
<tr>
<td>Product 1</td>
<td>S13, S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S120</td>
</tr>
</table>
I know how it can do with javascript:
let tr;
$('#test1234 tr').each(function () {
if($(this).find('td:nth-child(1)').text().length){
tr = $(this);
tr.find('td:nth-child(2)').text('')
}else{
let td = $(tr).find('td:nth-child(2)');
let comma = td.text() !== "" ? ", " : '';
td.text(td.text() + comma + $(this).find('td:nth-child(2)').text())
$(this).remove()
}
});
But I need do this with php. How I can do it?
I have this html page on my php variable: $html_body.
generally you can't remove it using php but i will give you suggestion that please use continue statement when your row is blank
for example
$html = "<tbody>";
foreach($data as $row){
if(empty($row['parameter'])){
continue;
}else{
$html .= "<tr> <td></td> </tr>";
}
}
$html .= "</tbody>";
Hello I write PHP header for downloading excel.
If I have 1 table I can set the width of <td> successfully by use width attribute
but if I have two table it's not working. How could I do? because I need multiple table in my excel page file
<?php
header("Content-Type: application/vnd.ms-excel; charset=TIS-620");
header('Content-Disposition: attachment; filename="report_schedule_teacher.xls"');#ชื่อไฟล์
?>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=TIS-620" />
</head>
<body>
<table width="100%" style="border-collapse: collapse;overflow:wrap; font-size:9pt;">
<thead>
<tr>
<td width="300">Hello1</td>
<td width="400">Hello2</td>
</tr>
</thead>
<tbody>
<tr>
<td>World1</td>
<td>World2</td>
</tr>
</tbody>
</table>
<table width="100%" style="border-collapse: collapse;overflow:wrap; font-size:9pt;">
<thead>
<tr>
<td width="300">Why I cannot set width if I have multiple table</td>
<td width="400">Noooo</td>
</tr>
</thead>
<tbody>
<tr>
<td>kub</td>
<td>pom</td>
</tr>
</tbody>
</table>
</body>
</html>
Excel, when reading HTML files, really only has one HTML table. If you look at the Excel window you'll see that physically it's just a single table. If you insist on separating the data (which makes no difference to Excel) you can use multiple table bodies:
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=TIS-620" />
</head>
<body>
<table width="100%" style="border-collapse: collapse;overflow:wrap; font-size:9pt;">
<thead>
<tr>
<td width="300">Hello1</td>
<td width="400">Hello2</td>
</tr>
</thead>
<tbody>
<tr>
<td>World1</td>
<td>World2</td>
</tr>
</tbody>
<thead>
<tr>
<td width="300">Why I cannot set width if I have multiple table</td>
<td width="400">Noooo</td>
</tr>
</thead>
<tbody>
<tr>
<td>kub</td>
<td>pom</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
By the way, you are abusing MIME types terribly here! This document is not application/vnd.ms-excel or application/xhtml+xml, it's text/html and should not be saved with an XLS extension. Excel can read HTML files, but that doesn't make HTML files Excel files!
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...
Hello people i have this code....
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
});
});
</script>
<style>
.on { background-color:red; color:#ffffff; }
</style>
</head>
<body>
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3">google</td>
</tr>
<tr>
<td class="mytableCol3">yahoo</td>
</tr>
<tr>
<td class="mytableCol3">bing</td>
</tr>
</tbody>
</table>
<table class="mytable" border=1>
</body>
</html>
above code is working fine by toggling red color between cells and it also redirects page to "specific location" when clicked on it.please check the demo ,you can observ first the cell goes red color then it will be redirected to google/yahoo/bing ,but now what iam need to do when they come back to by clicking back button /(code what i write) ,specific cell which was selected should still be highlighted with red color.... i reied doing this by session but not exactly.. can any one plzz help me to fix this....
You can do that with $.cookie
Assign an ID for each line and set cookie, then check that cookie for an available id:
<table class="mytable" border=1>
<tbody>
<tr>
<td class="mytableCol3" id="google">google</td>
</tr>
<tr>
<td class="mytableCol3" id="yahoo">yahoo</td>
</tr>
<tr>
<td class="mytableCol3" id="bing">bing</td>
</tr>
</tbody>
</table>
and javascript:
$(function(){
$(".mytableCol3").click(function(){
$(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
$.cookie('clicked', $(this).attr('id'));
});
if($('#'+$.cookie('clicked'))){
$('#'+$.cookie('clicked')).addClass('on');
}
});
You can use plain javascript for cookie, I used that plugin for example.