用一次点击填充多个输入字段

Question

这是我的问题...我只需点击一下就可以填充多个文本框。需要点击的链接放置在用php生成的td中，数据来自MySQL数据库（血腥的JS初学者！）。

下面的代码只是我的问题的一个简短的例子。

在此先感谢

<script type='text/javascript'> 
$(function(){ 
    $('.click').live('click', function() { 
     $("#brand").val($(this).html()); 
     $("#color").val('I need the color here'); 
     $("#size").val('and here the size'); 
    }); 
}); 
</script> 

<label for="brand">Brand:</label><input autocomplete="off" id="brand" type="text" name="brand" /> 
<label for="color">Color:</label><input autocomplete="off" id="color" type="text" name="color" /> 
<label for="size">Size:</label> 
<select id="size" name="size"> 
    <option>M</option> 
    <option>L</option> 
    <option>XL</option> 
</select> 

<table> 
    <tr> 
     <th>brand</th> 
     <th>color</th> 
     <th>size</th> 
    </tr> 
    <tr> 
     <td><a href="#" class="click">nike</a></td> 
     <td>red</td> 
     <td>45</td> 
    </tr> 
    <tr> 
     <td colspan="3">...more rows here...</td> 
    </tr> 
</table> 

Answer 1

首先，我建议改变你的标记给类的颜色和大小的表格单元格，就像这样：

<tr> 
    <td><a href="#" class="click">nike</a></td> 
    <td class="color">red</td> 
    <td class="size">L</td> 
</tr> 

而且，要改变的值下拉菜单中，您需要包括每个选项的值，就像这样：

<select id="size" name="size"> 
    <option value="M">M</option> 
    <option value="L">L</option> 
    <option value="XL">XL</option> 
</select> 

然后，在你javasc ript函数可以填充输入字段，您可以将大小和颜色的值分配给变量。因为。点击元素是兄弟姐妹的大小和颜色的细胞表电池元件的孩子，我们需要选择。点击的父母，然后选择兄弟姐妹：

var color = $(this).parent().siblings('.color').text(); 
var size = $(this).parent().siblings('.size').text(); 
$("#color").val(color); 
$("#size").val(size); 

该做的。然后你只需使用相同的标记填充其余行，如下所示：

<tr> 
    <td><a href="#" class="click">adidas</a></td> 
    <td class="color">blue</td> 
    <td class="size">XL</td> 
</tr>