Я использовал JQuery, чтобы добавить кнопку "изображение" в несколько строк в таблице. Я использовал следующий код:
$("#tblResults tr:nth-child(1) td.ResultsHeader span.gridRCHders").each(function(){
var cat = $.trim($(this).text());
if(cat.length > 0){
if(cat.toLowerCase() != "total"){
options.xAxis.categories.push(cat);
}
}
});
который в основном проходит через первую строку таблицы и сохраняет значения ячейки в массиве категорий. Я вношу изменения в существующий сайт, поэтому не могу изменить расположение таблицы.
То, что я заметил на некоторых страницах, отображается более одной таблицы, мои кнопки с изображениями добавлены правильно, но мне нужно изменить приведенный выше код, чтобы прочитать первую строку таблицы, на которой находится изображение.... Я пробовал ниже, но он, похоже, не работает:
$("img.ChartButton").click(function(){
var currentTable = $(this).closest("tr").closest("table").filter("tr:nth-child(1) td.ResultsHeader span.gridRCHders");
options.xAxis.categories = [];
currentTable.each(function(){
var cat = $.trim($(this).text());
if(cat.length > 0){
if(cat.toLowerCase() != "total"){
options.xAxis.categories.push(cat);
}
}
});
});
Любая помощь будет полезна. Благодаря
Н
EDIT: Ниже приведена копия одной из таблиц, как вы можете видеть в строке 2, у меня есть изображение "ChartButton", которое может быть в любой строке от 2 до, и они могут быть более одного в таблице. Что мне нужно сделать, так это когда щелкнуть изображение, что данные в строке ONE текущей таблицы (они могут быть более одной таблицы на странице) считываются и сохраняются в массив категорий (см. Выше код). Надеюсь, это поможет.
<table cellspacing="1" cellpadding="2" border="0" class="whiteBorder">
<tbody>
<tr>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders"> </span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jan</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Feb</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Mar</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Apr</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">May</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jun</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Jul</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Aug</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Sep</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Oct</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Nov</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Dec</span></td>
<td width="40" valign="bottom" align="left" class="ResultsHeader" colspan="1" rowspan="1"><span class="gridRCHders">Total</span></td>
</tr>
<tr class="lGreyBG">
<td align="left" colspan="15">
<span class="gridTXT"><b>KPI</b> <img width="20" alt="Chart" src="Images/chart_bar.png" id="c0_1" class="ChartButton"></span>
</td>
</tr>
<tr class="lGreyBGalt">
<td nowrap="" class="ResultsHeader"><span class="gridRCHders">Pre Conversion %</span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>65 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>62 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>67 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>68 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>69 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>0 %</i></span></td>
<td nowrap="" align="right"><span class="gridTXT"><i>66 %</i></span></td>
</tr>
</tbody>
</table>
EDIT: Наконец, он работает, ниже строка, которую я должен был использовать для получения правильных данных в первой строке...
var $row = $(this).closest('table').children('tbody').children('tr:first').children('td.ResultsHeader').children('span.gridRCHders');
Я не уверен, зачем мне нужны все вызовы для детей, так как я попробовал следующее: не работает:
var $row = $(this).closest('table').children('tbody').children('tr:first td.ResultsHeader span.gridRCHders');
Спасибо всем за помощь.