Question

这是我桌子上的一个示例表格行：

<tr class="formulaRow">
    <td>
              <input type="text" class="ingredient required" name="ingredient">
    </td>
    <td>
        <input type="number" class="amount required" name="amount">
    </td>
    <td>
        <input type="number" class="carrier required" name="carrier" max="100">
    </td>
    <td>
        <input type="number" class="kilo required" name="kilo">
    </td>
    <td>
        <select class="tableDropDown" style="min-width: 100px;">
                <option value="other">The Manufacturer</option>
                <option value="me">Me</option>
         </select>
    </td>
    <td>
        <input class="packSize" type="number" disabled>
    </td>
</tr>

<button type="submit" class="analyze">Analyze</button>

我需要将每个表行中的这些数据传递给下面的javascript函数，一旦将其推入＆＃34;公式＆＃34;阵列：

var addIngredient = function(ingredient, active, carrier, price, origin, packSize) {
    var ingredient = {
        ingredient: ingredient,
        active: active,
        carrier: carrier,
        price: price,
        origin: origin,
        packSize: packSize
    };

    state.formula.push(ingredient);

};

我尝试使用以下jquery函数完成此任务：

$(".analyze").click(function() {
var ingredients = $(".formulaRow");
$("ingredients").each(function() {
    addIngredient($(":input"));
    }
}

但是，这不起作用。

注意addIngredient函数存储在名为data-model.js的单独javascript文件中可能也很重要，而jquery函数存储在名为interaction.js的文件中，这两个文件都加载到html的头部页。

Answer 1

var ingredients = $(".formulaRow");

抓住你所有的＆＃34; tr＆＃34;具有类＆＃34; formulaRow＆＃34;的元素。在每一行上，您都有输入和选择。您需要这些表单元素的值。我会将你的addIngredient函数更改为：

var addIngredient = function($row) {
    var ingredient = {};
    $row.find('input, select').each(function(){
       ingredient[$(this).attr('name')] = $(this).val();
         //^^this is grabbing the attribute off the html element
         //i.e. ingredient["amount"]
    });

    state.formula.push(ingredient);

};

被称为：

var $ingredients = $(".formulaRow");
$ingredients.each(function() {
    addIngredient($(this));
}

但是你想要添加＆＃34; name＆＃34;属性到你的select元素和input.packSize，以便它工作。

使用Jquery将表行中的数据传递到对象文字

1 个答案: