Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Сравнить значение в td и поменять bgcolor (https://javascript.ru/forum/jquery/49596-sravnit-znachenie-v-td-i-pomenyat-bgcolor.html)

AndyTitan 20.08.2014 14:10

Сравнить значение в 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> <--------- ПРОВЕРИТЬ ТУТ !!!!!!!

krasovsky 20.08.2014 14:36

Я честно совершенно не понял что тебе надо
Тебе нужно подсчитать количество td? Тебе ножно подсчитать количество td используя какую то функцию/api Jtable?
На какое значение тебе нужно проверить pending который в данный момент судя по коду является строкой??
Какую ячейку тебе надо стилизовать?

Для всего этого можно использовать js, я не вижу никаких причин менять ядро jtable. Возможно тебе нужно это делать в связке в этим плагином, в таком случае наверняка у него имеются коллбэки или api

AndyTitan 20.08.2014 14:44

Мне надо отпарсить <table class="jtable">, прощупать все теги <td></td>,
и если в одним из тегов будет содержание "<td>Pending</td>"
поменять style.backgroundColor = "Red"; к примеру.

tsigel 20.08.2014 14:55

$(".jtable").find("td").each(function () {
  if ($(this).text() == "Pending") {
     $(this).css("backgroundColor", "red");
  }
});


C jQuery

ksa 20.08.2014 15:20

Цитата:

Сообщение от AndyTitan
отпарсить <table class="jtable">, прощупать все теги <td></td>,
и если в одним из тегов будет содержание "<td>Pending</td>"
поменять style.backgroundColor = "Red";

Как вариант...

<!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>

AndyTitan 20.08.2014 15:48

Грусть пичалька, ничего не работает :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&region=' + 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&region=' + 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>

ksa 20.08.2014 15:58

Цитата:

Сообщение от AndyTitan
ничего не работает

Мой пример рабочий. Его можно запустить прямо тут...

AndyTitan 20.08.2014 16:11

Безусловно, попробывал тут - все работает, но у меня на сайте не хочет...

я это код пихал и в шапку и после выполнения скрипта и перед выполнением 0.00 реакции.

ksa 20.08.2014 16:20

Цитата:

Сообщение от AndyTitan
я это код пихал

Вспомнилось про выражение "я твой дом труба шатал"... :D

"Пихать код" просто так дело неблагодарное... Нужно ведь понимать, что есть у тебя и как с этим работать...

AndyTitan 20.08.2014 16:27

Ну я грубо выразился, код размещал до выполнения таблицы, после выполнения кода таблицы, в шапку. ничего из этого не вышло, тем не мение код без нареканий выполняется как, тут так и на http://jsfiddle.net/.


Часовой пояс GMT +3, время: 09:28.