I am fetching data with ajax in PHP. my table td width is not fixing to table th width. How can I manage td width in CSS.
This is the script
HTML
<table id="example" class="table">
<thead>
<tr>
<th>Category</th>
<th width="20%">Name</th>
<th width="20%">Father Name</th>
<th width="60%">Notes</th>
</tr>
</thead>
</table>
JS
var mainTable = $('#example').DataTable({
'ajax': 'fetch.php',
'order': []
});
PHP
<?php
require_once("config.php");
$query = "SELECT name, fname, notes FROM lab_examinations";
$stmt = $db->prepare($query);
$stmt->execute();
$result = array('data' => array());
while($row = $stmt->fetch(PDO:: FETCH_OBJ) ) {
$name = $row->name;
$fname = $row->fname;
$notes = $row->notes;
$result['data'][] = array($name, $fname, $notes);
}
echo json_encode($result);
You can do it with CSS like this
CSS
table tbody tr{
width: auto;
}
Related
I have been working with mpdf and acf to generate a pdf. I can generate the pdf and display text values but I can't get it to display the values of a checkbox, it displays nothing.
This is the code that I have, what am I doing wrong? How do I get it to display something for the checkbox?
$offer is the checkbox that I am trying to display.
add_action('init', 'congres_redirect');
function congres_redirect() {
if(isset($_GET['offer'])) {
global $post; //ADD THIS
$offerid = $_GET['offer'];
$restname = get_field('restaurant_name', $offerid);
$offer = get_field_object('restaurant_offer', $offerid);
if( in_array( '2courses10', $offer ) or '2courses10' == $offer ) { $offer2for10='2 courses for 10'; }
$randNum = strtoupper(generateRandomString(5));
$date = date("Ymd");
$namecode = strtoupper(str_replace(' ', '', $restname));
$namestr = substr($namecode, 0, 6);
view_conferinta($restname, $randNum, $date, $namecode, $namestr);
}
}
function view_conferinta($restname, $randNum, $date, $namecode, $namestr) {
global $post;
$output = '<html>
<head><title>'.$restname.' | Eat Leeds</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head>
<body style="font-family:chelvetica;">
<table class="voucher-content" width="100%">
<tr>
<td width="60%"></td>
<td width="40%">
<table>
<tr class="inner-voucher">
<td class="offer-details" style="color: #fff !important;">'.$restname.'</td>
</tr>
<tr class="inner-voucher">
<td class="offer-details" style="color: #fff !important;">'.$offer2for10.'</td>
</tr>
<tr>
<td style="vertical-align: top; padding-top: 20px; padding-left: 280px; color: #fff;"><div class="vouchercode">Voucher Code: EL-'.$namestr.''.$date.'-'.$randNum.'</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>';
require_once __DIR__ . '/mpdf/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf(['debug' => true]);
$mpdf->WriteHTML($output);
$mpdf->Output('eatleeds-EL-'.$namestr.''.$date.'-'.$randNum.'.pdf','I');
exit;
}
You did not set a default value for $offer2for10.
You could also use a switch and loop into $offer value:
switch ($offer) {
case '2courses10':
$offer2for10 = "2 courses for 10";
break;
default:
$offer2for10 = "Unknown offer";
break;
}
I would like my TD text to move a bit but so far I am only able to text align left, center, right:
<div class= "col-md-7" id = "recyclable-list">
<table class="table">
<thead>
<tr>
<th style=" padding-left:25px;";>RecyclableID</th>
<th style=" padding-left:100px;">Name</th>
<th style=" text-align: center;">RecyclableType</th>
</tr>
</thead>
<tbody id="recycleTable">
</tbody>
</table>
This is my script call for the database:
var myarray = [];
$.ajax({
url:"https://ecoexchange.dscloud.me:8080/api/get",
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"RecyclableGet(0)",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,xhr,textStatus) {
myarray = data;
buildTable(myarray);
console.log(myarray);
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
function buildTable(data) {
var table = document.getElementById("recycleTable")
for (var i = 0; i < data.length; i++) {
var row = `<tr>
<td>${data[i].RecyclableID}</td>
<td>${data[i].Name}</td>
<td>${data[i].RecyclableType}</td>
</tr>`
table.innerHTML += row
}
};
This is how the table looks like currently:
Table image look like
Now, how do I style this to match the header rows?
You have used inline-styles for your table head. Try to repeat the same in JQuery within the template literals where you are creating the table rows on fly to match the thead styling for all the rows.
for (var i = 0; i < data.length; i++) {
var row = `<tr>
<td style="padding-left:25px;">${data[i].RecyclableID}</td>
<td style="padding-left:100px;">${data[i].Name}</td>
<td style="text-align: center;">${data[i].RecyclableType}</td>
</tr>`
table.innerHTML += row
}
This should do it !
I am attempting to create a Gutenberg block to track exercise sets. I'm using a RichText component to allow users to edit default values in a table I pre-populate for them.
The block works well on the editor and, after saving, renders correctly in the post. However, when I reload the editor, I receive this error message: Block validation: Expected tag name 'thead', instead saw 'table'. It's almost like Gutenberg is stripping the table tag but leaving everything else.
Of course, that doesn't make sense, but I'm not sure what else it could be.
Here's my code, heavily edited for readability:
const { registerBlockType } = wp.blocks;
const { AlignmentToolbar, BlockAlignmentToolbar, BlockControls, RichText, useInnerBlockProps } = wp.blockEditor;
const { Component } = wp.element;
registerBlockType('bsd-strong-post/training-session', {
title: __('Strong Post', 'bsd-strong-post'),
description: __('Provides a short summary of a training session', 'bsd-strong-post'),
category: 'common',
icon: blockIcons.weight_lifting,
keywords: [
__('strength workout', 'bsd-strong-post'),
__('strong', 'bsd-strong-post'),
__('training', 'bsd-strong-post')
],
supports: {
html: true
},
attributes: {
/* ... */,
dayTemplateContent: {
type: 'string',
source: 'html',
selector: '.bsd-strong-post-training-template'
},
/* ... */
},
/* ... */
edit: class extends Component {
constructor(props) {
super(...arguments);
this.props = props;
/* ... */
this.dayTemplateHandler = this.dayTemplateHandler.bind(this);
this.onChangeBlockTemplate = this.onChangeBlockTemplate.bind(this);
}
/* ... */
dayTemplateHandler(new_val) {
const dayTemplateList = this.state.dayTemplateList;
let selectedDayTemplate = dayTemplateList.filter(item => {
return item.value == new_val;
})
if (selectedDayTemplate[0]['label']) {
this.props.setAttributes({
dayTemplateId: new_val,
dayTemplateName: selectedDayTemplate[0]['label']
});
}
this.getTemplate(new_val);
}
getTemplate(templateId) {
api.getDayTemplate(templateId)
.then((data) => {
if (!data.status || data.status == 0) {
return false;
};
if (!data.day_template) {
return false;
};
this.props.setAttributes({
dayTemplateContent: data.day_template.template_content
});
return data.day_template;
}).catch((err) => {
console.log('getTemplate caught error')
return false;
});
}
onChangeBlockTemplate(value) {
this.props.setAttributes({
dayTemplateContent: value
});
}
/* ... */
render() {
const { dayTemplateHandler, onChangeBlockTemplate, phaseControlHandler, programControlHandler, updateBlockAlignment, updateTextAlignment } = this;
const { block_alignment, dayTemplateId, dayTemplateName, dayTemplateContent, phaseId, phaseName, programAuthor, programId, programName, programPhases, text_alignment } = this.props.attributes;
/* ... */
return [
<InspectorControls>
<PanelBody title={ __('Basics', 'bsd-strong-post') }>
<SelectControl
label={ __('Day', 'bsd-strong-post') }
help={ __('The training session (e.g., Day One)', 'bsd-strong-post') }
value={ dayTemplateId }
options={ this.state.phaseTemplates }
onChange={ dayTemplateHandler }
/>
}
</PanelBody>
</InspectorControls>,
<div className='bsd-strong-post-block-editor'>
<div className={ this.props.className }>
<RichText
placeholder={ __('Log your lifts here') }
value={ dayTemplateContent }
multiline={ false }
onChange={ onChangeBlockTemplate }
className='bsd-strong-post-training-log'
/>
</div>
</div>
];
}
},
save: (props) => {
return (
<div className={ `align${props.attributes.block_alignment}` }>
<ul className='list-unstyled'style={{ textAlign: props.attributes.text_alignment }}>
<li>
<strong>{ __('Program', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-program'>{ props.attributes.programName }</span>
</li>
<li>
<strong>{ __('Phase', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-phase-ph'>{ props.attributes.phaseName }</span>
</li>
<li>
<strong>{ __('Day', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-day-ph'>{ props.attributes.dayTemplateName }</span>
</li>
<li>
<strong>{ __('Author', 'bsd-strong-post') }: </strong>
<span className='bsd-strong-post-author-ph'>{ props.attributes.programAuthor }</span>
</li>
</ul>
<RichText.Content
value={ props.attributes.dayTemplateContent }
className='bsd-strong-post-training-log'
/>
</div>
)
}
});
Here's the console output on reload:
Content generated by 'save' function:
<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul>
<thead>
<tr>
<th scope="col">Exercise</th>
<th scope="col">Set 1</th>
<th scope="col">Set 2</th>
</tr>
</thead>
<tbody>
<tr class="bsd-strong-post-exercise-one">
<td class="bsd-strong-post-exercise-name">Squat</td>
<td class="bsd-strong-post-set-1">95 x 5</td>
<td class="bsd-strong-post-set-2">135 x 5</td>
</tr>
</tbody>
</div>
Content retrieved from post body:
<div class="wp-block-bsd-strong-post-training-session alignwide"><ul class="list-unstyled"><li><strong>Program: </strong><span class="bsd-strong-post-program">Madcow</span></li><li><strong>Phase: </strong><span class="bsd-strong-post-phase-ph">Intermediate</span></li><li><strong>Day: </strong><span class="bsd-strong-post-day-ph">Day 1</span></li><li><strong>Author: </strong><span class="bsd-strong-post-author-ph">Madcow</span></li></ul><table class='bsd-strong-post-training-template'>
<thead>
<tr>
<th scope='col'>Exercise</th>
<th scope='col'>Set 1</th>
<th scope='col'>Set 2</th>
</tr>
</thead>
<tbody>
<tr class='bsd-strong-post-exercise-one'>
<td class='bsd-strong-post-exercise-name'>Squat</td>
<td class='bsd-strong-post-set-1'>95 x 5</td>
<td class='bsd-strong-post-set-2'>135 x 5</td>
</tr>
</tbody>
</table></div>
I can see that the content displayed below Content generated by 'save' function: is missing the <table> and </table> tags. I've tried to work around this by adding tagName='table' in the RichText.Content properties inside the save function, but then the console shows duplicate <table> and </table> tags.
EDIT: The table is populated when a user makes a change to the Select control in InspectorControls. This action calls dayTemplateHandler, which among other things, calls getTemplate, a function that gets the content of the table from the database. Here's an example of that output (data.day_template.template_content):
<table class='bsd-strong-post-training-template'>
<thead>
<tr>
<th scope='col'>Exercise</th>
<th scope='col'>Set 1</th>
<th scope='col'>Set 2</th>
</tr>
</thead>
<tbody>
<tr class='bsd-strong-post-exercise-one'>
<td class='bsd-strong-post-exercise-name'>Squat</td>
<td class='bsd-strong-post-set-1'>95 x 5</td>
<td class='bsd-strong-post-set-2'>135 x 5</td>
</tr>
</tbody>
</table>
On reviewing the table template and considering the error, I suspect the issue is the selector of the dayTemplateContent attribute, .bsd-strong-post-training-template
The first time the content is saved, it successfully loads the template data from database and saves the complete table structure. When the content is reloaded, the block validator fails as the selector of dayTemplateContent reads in the child nodes of the table's css selector (which is thead) and doesn't match expected content. Ref: HTML example of blockquote/paragraphs
Try wrapping the <table> template with a <div class="bsd-strong-post-training-template"> or changing the selector.
I use Bootstrap 3, just to know. I cannot get rid of 3 blank pages after the first one. Don t know what is causing this problem.
HTML:
<table class="table table-bordered table-hover text-center" id="post_accesorii">
<thead>
<tr>
<th>Cod</th>
<th>Denumire</th>
<th>Cantitate</th>
<th>U.M.</th>
</tr>
</thead>
<tbody>
<form method="post" action="" autocomplete="off">
<?php
while($rowD = mysqli_fetch_assoc($query)) {
foreach ($rowD as $col => $val) {
if($val != "" && $val != "0" && $col != "nr_fisa" && $col != "id") {
$findum = mysqli_query($mysqli, "SELECT * FROM `stocuri` WHERE `cod` = '$col' AND `post1` = 'Accesorii'") or die(mysqli_error($mysqli));
$rowum = mysqli_fetch_array($findum);
echo "<tr class='piesa_folosita'>";
if($col == $rowum['cod'])
{
echo "<td>" . $col . "</td>";
echo "<td>" . $rowum['denumire'] . "</td>";
echo "<td>" . $val . "</td>";
echo "<td>" . $rowum['um'] . "</td>";
}
echo "</tr>";
} else {
}
}
}
?>
</tbody>
<tfoot>
<tr>
<th>Cod</th>
<th>Denumire</th>
<th>Cantitate</th>
<th>U.M.</th>
<tr>
</tfoot>
</table>
PRINT
print.css:
#media print {
html, body {
visibility: hidden;
height: 99% !important;
}
#post_accesorii, #post_accesorii * {
visibility: visible;
height: 99% !important;
}
#post_accesorii+#post_accesorii {
page-break-before: always;
}
}
In print preview, I have 3 blank pages after the first page with my table. I tried several solutions to remove them but none worked.
What can be the problem?
Your height: 99% !important; might be the problem, because the <body/> does not have parent
Your last print rule implies that there is more than one element that has the ID #post_accesorii . This should not be the case and is invalid HTML: IDs must only appear once in a page. So maybe that's the reason for your problems (I don't know what is around the code you posted, so that's all I can say).
To avoid that, make it a class instead of an ID: .post_accesorii and assign that to the HTML table tag/s via <table class="post_accesorii">
i have table with data and data populated by knockout js foreach bind.
i would like to know how to access specific table row's data when it gets updated.
if i could access table row then could add css class to that tr. my objective is to do bit color animation for a row which will be updated just clicking on button. when any data will be push to table row clicking on "Update Data" button then i want to add a class to that table row and after few minute remove that class too. hence i am new so no logic is coming to my mind to achieve this....any help would be appreciated. thanks
jsfiddle http://jsfiddle.net/62Ls6x9n/157/
full code
<button data-bind="click: AddNewData">Add New Data</button>
<button data-bind="click: UpdateDataByIds">Update Data</button>
<br><br>
<table class="imagetable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody data-bind="foreach: Stocks">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: price"></td>
<td data-bind="text: status"></td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
</table>
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
var StockItem = function(_id, _name, _price, _status){
var self = this;
self.id = ko.observable(_id);
self.name = ko.observable(_name);
self.price = ko.observable(_price);
self.status = ko.observable(_status);
};
var data= [
new StockItem("12345", "Acme Widget 1", "£25.99", "In Stock"),
new StockItem("67890", "Acme Widget 2", "£28.99", "In Stock"), new StockItem("11123","Acme Widget 3","£15.99", "In Stock"),
new StockItem("14156", "Acme Widget 4", "£33.99", "In Stock")
];
var NewData = [new StockItem("99999", "HSL Limited", "£78.99", "In Stock")];
var appViewModel = function()
{
var self = this;
self.Stocks = ko.observableArray(data);
self.AddNewData = function(){
self.Stocks.push.apply(self.Stocks,NewData);
};
self.DeleteItem = function(dataContext){
var itemToDelete = dataContext;
self.Stocks.remove(itemToDelete);
}
self.UpdateDataByIds = function(){
var id1 = '11123';
var id2 = '12345';
self.UpdateById(id1,null,null,"Out of Stock");
self.UpdateById(id2,null,"31.45",null);
};
self.UpdateById = function(_id, _name, _price, _status){
var matchedItem = ko.utils.arrayFirst(self.Stocks(), function(item) {
return item.id() === _id;
});
if (matchedItem != null){
if (_name != null) matchedItem.name(_name);
if (_price != null) matchedItem.price(_price);
if (_status != null) matchedItem.status(_status);
}
};
self.UpdateData = function(dataContext){
var itemToEdit = dataContext;
itemToEdit.status("Out of Stock");
};
};
var vm = new appViewModel();
ko.applyBindings(vm);
You can add a Mutated array to your view-model:
self.Mutated = ko.observableArray();
And upon updating / adding, add the item id to the array:
self.Mutated.push(_id);
Then in your HTML, have a mutated class on each <TR> that is indeed mutated:
<tr data-bind="css: { mutated: $root.Mutated.indexOf(id()) > -1 }">
And the CSS:
table.imagetable tr.mutated td { background-color: red; }
See Fiddle