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>

然后，在填充输入字段的javascript函数中，您可以为变量指定大小和颜色的值。因为.click元素是表格单元格元素的子元素，它是大小和颜色单元格的兄弟，我们需要选择.click的父元素，然后选择兄弟元素：

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>

只需单击一下即可填充多个输入字段

1 个答案: