Найти элемент внутри строки таблицы

Question

Как с JQuery я могу захватить содержание этой таблицы:

<table> 
    <tr> 
    <th>Element 1</th> 
    <td>Red</td> 
    </tr> 
    <tr> 
    <th>Element 2</th> 
    <td>Pink</td> 
    </tr> 
</table> 

Я хочу, чтобы найти цвет линии Element 1. Мне не нужен .each, так как я хочу только по цвету.

---

Я пробовал:

var color = find("<th>Element 2</th>").next().("<td>").html(); 

Answer 1

Если вы хотите получить список элементов (то есть, ваши цвета), вы не можете избежать петли или .each. Вы могли бы, например:

$("table tr td:last-child").each(function(k,v) { 
    alert($(v).html()); 
}); 

или:

var colors = $("table tr td:last-child"); 
for(var x=0;x<colors.length;x++) { 
    alert($(colors[x]).html()); 
} 

Но это не является хорошим метод, так как ваши клетки не могут реально получить идентифицированные (и т.д. нет id или class). В случае изменения структуры таблицы текущий javascript не может работать. Я рекомендую называть после извлекаемой информации, как это:

<table> 
    <tr> 
    <th>Element 1</th> 
    <td class="color">Red</td> 
    </tr> 
    <tr> 
    <th>Element 2</th> 
    <td class="color">Pink</td> 
    </tr> 
</table> 

и:

$("table tr td.color").each(function(k,v) { 
    alert($(v).html()); 
}); 

или:

var colors = $("table tr td.color"); 
for(var x=0;x<colors.length;x++) { 
    alert($(colors[x]).html()); 
} 

UPDATE

Просто видел, как вы хотите, только первый цвет. Просто используйте следующее:

var color = $("table tr:first-child td:last-child").html(); 

Если вы действительно хотите, чтобы поиск по тексту в <th>, проверить это:

var color = $("table tr th:contains('Element 1')").next().html(); 

Answer 2

использование:

var color=$('th:contains(Element 1)').next().text() 

Working Demo

Answer 3

использовать что-то вроде этого, я проверил это и работает.

<script> 
     $().ready(function(e){ 
      $("table tr td").each(function(e){ 
       alert($(this).html()); 
      }) 
     }) 
    </script> 

Answer 4

var color ; 
$("table td").each(function(){ 
color=$(this).html(); 
}); 

Answer 5

Предполагая, что вы должны использовать эти значения больше, чем когда-то, вероятно, лучше, чтобы сделать объект из значений. как это:

var colors = {}; 
$('tr').each(function(){ 
    colors[($('th',this).html())] = $('td',this).html(); 
}); 

попробовать его http://jsfiddle.net/asvvd4rh/