关于tr周围缺少表格标签的怪异jQuery功能 [英] Weird jQuery functionality on missing table tags around tr
问题描述
请查看以下我没有用表标签自动包装的html:
Check out the below html which I haven't wrapped with table tags knowingly:
html:
<tr class="item1">
<td>
<select name="postArrayFormato[]" id="test">
<option value="frascoG">Frasco 370g</option>
<option value="frascoC">Frasco 220g</option>
<option value="sachet">Sachet 200g</option>
<option value="doypack">Doy/Pack 250g</option>
</select>
</td>
<td><input type="text" name="test" value="20" readonly/></td>
</tr>
jquery:
由于某种原因，这与上面的html一起正常工作，对我来说似乎很奇怪.
This works fine with the above html for some reason, which looks weird to me.
js小提琴:
$(function(){
$("body").on("change","#test",function(){
$(this).next().val("99");
});
});
当我在tr周围添加表格标签时，上面的jquery不起作用，这很明显，它需要以下代码:
The above jquery doesn't work when I add table tags around the tr, which is obvious and it needs the below code:
js小提琴: http://jsfiddle.net/gM2vX/4/
$(function(){
$("body").on("change","#test",function(){
$(this).parent().next().find("input").val("99");
});
});
但是我的问题为什么在第一种情况下可以正常工作? 这不是问题，只是需要澄清.
But my question why is it working fine in the first case? This is not an issue but just need clarity.
推荐答案
检查页面的html.由于您不能拥有表中没有的tr，因此浏览器通过删除tr和td元素为您修复"它，结果是删除select和
Inspect the html of the page. Since you can't have a tr that isn't in a table, the browser "fixes" it for you by removing the tr and td elements, and as a result, the select and input become siblings:
<body style="">
<select name="postArrayFormato[]" id="test">
<option value="frascoG">Frasco 370g</option>
<option value="frascoC">Frasco 220g</option>
<option value="sachet">Sachet 200g</option>
<option value="doypack">Doy/Pack 250g</option>
</select>
<input type="text" name="test" value="20" readonly="">
</body>
这篇关于关于tr周围缺少表格标签的怪异jQuery功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
