Сравнить значение в td и поменять bgcolor
Краткая предыстория: я кодер нуб, начал кодить сразу c PHP, собственно в силу направления, в любом случае сталкиваюсь с JS и тут меня настигает осознание полной беспомощности)))
тут вот наконец устроился на работу и на первом тз по js просто зафэйлился. Суть заключается в том, чтобы или подсчитать td или сразу проверить на значение "Pending" а далее присвоить ячейке bgcolor или класс в который я стилизую... проштудировал весь гугл на англ и русским, в основном надо вносить изменения в ядро jtable но этого нельзя делать (так сказали), т.е. надо написать хук. помогите плиз. вот собственно примерная структура. <table class="jtable"> <tbody> <tr class="jtable-data-row jtable-row-even" data-record-key="2286"> <td><img src="/assets/img/list_metro.png" title="Edit transfers"></td><td>2014-08-19</td> <td>16:08</td> <td>Aegwynn - H : eu</td> <td>TB</td> <td></td> <td>0</td> <td></td> <td> </td> <td></td> <td>Cancelled</td> <--------- ПРОВЕРИТЬ ТУТ !!!!!!!!!!! <td class="jtable-command-column"> <button title="Edit Record" class="jtable-command-button jtable-edit-command-button"> <span>Edit Record</span> </button></td> <td class="jtable-command-column"> <button title="Delete" class="jtable-command-button jtable-delete-command-button"> <span>Delete</span> </button></td></tr> <tr class="jtable-data-row" data-record-key="2285"> <td><img src="/assets/img/list_metro.png" title="Edit transfers"></td><td>2014-08-19</td> <td>13:19</td> <td>Aegwynn - H : eu</td> <td>TB</td> <td>bbbbbb</td> <td>0</td> <td>bbbbb</td> <td> </td> <td>bbb</td> <td>Pending</td> <--------- ПРОВЕРИТЬ ТУТ !!!!!!! |
Я честно совершенно не понял что тебе надо
Тебе нужно подсчитать количество td? Тебе ножно подсчитать количество td используя какую то функцию/api Jtable? На какое значение тебе нужно проверить pending который в данный момент судя по коду является строкой?? Какую ячейку тебе надо стилизовать? Для всего этого можно использовать js, я не вижу никаких причин менять ядро jtable. Возможно тебе нужно это делать в связке в этим плагином, в таком случае наверняка у него имеются коллбэки или api |
Мне надо отпарсить <table class="jtable">, прощупать все теги <td></td>,
и если в одним из тегов будет содержание "<td>Pending</td>" поменять style.backgroundColor = "Red"; к примеру. |
$(".jtable").find("td").each(function () {
if ($(this).text() == "Pending") {
$(this).css("backgroundColor", "red");
}
});
C jQuery |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(document).ready(function(){
$('.jtable td:contains("Pending")').css('backgroundColor','red');
});
</script>
</head>
<body>
<table class='jtable'>
<tr>
<td>Pending</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>Pending</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>Pending</td>
</tr>
</table>
</body>
</html>
|
Грусть пичалька, ничего не работает :cray:
тут наверное без api не обойтись... вот как выглядет таблица, забрасывал скрип и в конец и в начало, толку никакого, не хочет хукать :( Не видать мне работы похоже ))) Спасибо и на этом, хоть не почувствовал себя одиноким на этом свете :))
<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#viewOrders').jtable({
title: 'Orders',
paging: true,
pageSize: 50,
sorting: true,
defaultSorting: 'order_id DESC',
actions: {
listAction: 'orders-actions.php?action=list',
createAction: 'orders-actions.php?action=create',
updateAction: 'orders-actions.php?action=update',
deleteAction: 'orders-actions.php?action=delete'
},
fields: {
order_id: {
title: 'ID',
//width: '5%',
key: true,
list: false,
create: false,
edit: false
},
//CHILD TABLE DEFINITION FOR "TRADES"
Trades: {
title: '',
width: '3%',
sorting: false,
edit: false,
create: false,
display: function (orderTransfers) {
//Create an image that will be used to open child table
var $img = $('<img src="/assets/img/list_metro.png" title="Edit transfers" />');
//Open child table when user clicks the image
$img.click(function () {
$('#viewOrders').jtable('openChildTable',
$img.closest('tr'),
{
title: 'Transfers',
actions: {
listAction: 'transfers-actions.php?action=list&order_id=' + orderTransfers.record.order_id,
createAction: 'transfers-actions.php?action=create&order_id=' + orderTransfers.record.order_id,
updateAction: 'transfers-actions.php?action=update',
deleteAction: 'transfers-actions.php?action=delete'
},
fields: {
order_id: {
type: 'hidden',
defaultValue: orderTransfers.record.order_id
},
transfer_id: {
title: 'ID',
width: '5%',
key: true,
create: false,
edit: false
},
date: {
title: 'Date',
type: 'date',
create: false,
edit: false
},
transfer_time: {
title: 'Time',
create: false,
edit: false
},
server_region: {
title: 'Region',
options: { 'eu': 'Europe', 'us': 'USA'},
edit: false,
list: false
},
option_transfer_id: {
type: 'hidden',
defaultValue: '1'
},
bank_id: {
title: 'Bank',
width: '20%',
dependsOn: 'server_region', //Countries depends on continentals. Thus, jTable builds cascade dropdowns!
options: function (data) {
if (data.source == 'list') {
return 'get-options.php?list=banks';
}
return 'get-options.php?list=banks®ion=' + data.dependedValues.server_region;
},
edit: false
},
transfer_ammount: {
title: 'Amount',
edit: false
},
transfer_comment: {
title: 'Comment',
list: false
},
transfer_active: {
title: 'Active',
options: { '1': 'Yes', '0': 'No'},
create: false
},
user_name: {
title: 'Operator',
create: false,
edit: false
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
order_date: {
title: 'Date',
type: 'date',
create: false,
edit: false
},
order_time: {
title: 'Time',
width: '5%',
create: false,
edit: false
},
order_product_name: {
title: 'Name',
width: '15%',
create: false
},
order_server_region: {
title: 'Region',
options: { 'eu': 'Europe', 'us': 'USA'},
edit: false,
list: false
},
order_server_id: {
title: 'Server',
dependsOn: 'order_server_region', //Countries depends on continentals. Thus, jTable builds cascade dropdowns!
options: function (data) {
if (data.source == 'list') {
return 'get-options.php?list=servers';
}
return 'get-options.php?list=servers®ion=' + data.dependedValues.order_server_region;
},
edit: false,
list: false
},
order_platform_id: {
title: 'Platform',
defaultValue: '1',
options: function (data) {
return 'get-options.php?list=option_platform';
},
edit: false
},
order_platform_order_id: {
title: 'Order#',
edit: false
},
order_referrer_id: {
title: 'Referrer',
defaultValue: '4',
options: function (data) {
return 'get-options.php?list=option_referrer';
},
create: false,
list: false,
edit: false
},
order_wallet_id: {
title: 'Wallet',
options: function (data) {
return 'get-options.php?list=option_wallet';
},
list: false
},
order_total_price: {
title: 'Total Price',
list: false,
edit: false
},
order_ammount: {
title: 'Amount',
edit: false
},
order_char_name: {
title: 'Char Name'
},
customer_name: {
title: 'Customer',
edit: false,
create: false
},
order_comment: {
title: 'Comment'
},
order_status: {
title: 'Status',
options: { 'pending': 'Pending', 'complete': 'Complete', 'cancelled': 'Cancelled'}
},
operator_name: {
title: 'Operator',
list: false,
create: false,
edit: false
}
}
});
//Load person list from server
$('#viewOrders').jtable('load');
});
</script>
|
Цитата:
|
Безусловно, попробывал тут - все работает, но у меня на сайте не хочет...
я это код пихал и в шапку и после выполнения скрипта и перед выполнением 0.00 реакции. |
Цитата:
"Пихать код" просто так дело неблагодарное... Нужно ведь понимать, что есть у тебя и как с этим работать... |
Ну я грубо выразился, код размещал до выполнения таблицы, после выполнения кода таблицы, в шапку. ничего из этого не вышло, тем не мение код без нареканий выполняется как, тут так и на http://jsfiddle.net/.
|
AndyTitan,
Вызовите его скажем в сет таймауте, например так:
setTimeout(function () {
$('.jtable td:contains("Pending")').css('backgroundColor','red');
}, 3000)
Если заработает - значит вы не в тот момент пытаетесь запустить код. Ищите момент когда таблица создана и сгенерирована. |
Аааа :dance: this is WORKS!
вся загвоздка была в тайминге, скрипт выполнялся до того как данные потягивались с аджакса )) Спасибо вам огромное, сегодня вы мне преподали прекрасный урок, день прожит не зря :) |
| Часовой пояс GMT +3, время: 07:37. |