Пример:
Выбрать все элементы submit.
"jQuery"
var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});
$('#result').text('jQuery matched ' + input.length + ' elements.');
// нам не надо чтобы форма отправлялась
$("form").submit(function () { return false; });
// Экстра JS делает HTML легче для редактирования (Не без ':submit' селектора)
$('#exampleTable').find('td').each(function(i, el) {
var inputEl = $(el).children().get(0);
$(el).before('' + $(inputEl).attr('type') + '');
})
"HTML"
<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
<tr>
<th>
Element Type
</th>
<th>
Element
</th>
</tr
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>
<input type="hidden" />
</td>
</tr>
<tr>
<td>
<input type="image" />
</td>
</tr>
<tr>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<select><option>Option</option></select>
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>
<button>Button</button>
</td>
</tr>
</table>
</form>
<div id="result"></div>
"CSS"
textarea { height:45px; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});
$('#result').text('jQuery matched ' + input.length + ' elements.');
// нам не надо чтобы форма отправлялась
$("form").submit(function () { return false; });
// Экстра JS делает HTML легче для редактирования (Не без ':submit' селектора)
$('#exampleTable').find('td').each(function(i, el) {
var inputEl = $(el).children().get(0);
$(el).before('' + $(inputEl).attr('type') + '');
})
});
</script>
</head>
<body class="iframe">
<table>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
<tr>
<th>
Element Type
</th>
<th>
Element
</th>
</tr
<tr>
<td>
<input type="button" value="Input Button"/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>
<input type="hidden" />
</td>
</tr>
<tr>
<td>
<input type="image" />
</td>
</tr>
<tr>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>
<input type="radio" />
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<select><option>Option</option></select>
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>
<button>Button</button>
</td>
</tr>
</table>
</form>
<div id="result"></div>
</body>
</html>
<style>
textarea { height:45px; }
</style>