Question

我只是想知道什么是使用jquery从这个HTMl代码中检索当前值并将它们存储到数组中的最佳方法？

<table id="metric_summary">
    <tbody>   
    <tr class="editable_metrics">
        <td><label>DataSet:</label></td>
       <td><input name="DataSet" value="prod"></td>
    </tr>

    <tr class="editable_metrics">
        <td><label>HostGroup:</label></td>
       <td><input name="HostGroup" value="MONITOR"></td>
    </tr>

    <tr class="editable_metrics">
        <td><label>Host:</label></td>
       <td><input name="Host" value="ALL"></td>
    </tr>

    <tr class="editable_metrics">
        <td><label>Class:</label></td>
       <td><input name="Class" value="CPU"></td>
    </tr>

    <tr class="editable_metrics">
        <td><label>Object:</label></td>
       <td><input name="Object" value="cpu"></td>
    </tr>

    <tr class="editable_metrics">
        <td><label>Metric:</label></td>
       <td><input name="Metric" value="CapacityCPUUtilization"></td>
    </tr>

感谢

Answer 1

我没有测试它，但它应该做的工作：

var Dict = {};
$('#metric_summary input').each(function (index, input) {
  Dict[input.name] = input.value;
});

编辑：如果要将值存储在没有标签的数组中，可以执行以下操作：

var Values = [];
$('.editable_metrics input').each(function (i, input) {
  Values.push(input.value);
});

但是你不知道哪个值指的是哪个标签。你可能想要这样做：

var Values = [];
$('.editable_metrics input').each(function (i, input) {
  Values.push( [ input.label, input.value ] );
});

Answer 2

我会遍历每一行，并为我关心的label和input value分别解析。请注意，如果您有重复的标签名称，对象存储将丢失值。

var arr_storage = []; // var to store as array
var obj_storage = {}; // var to store as object
$('#metric_summary tr').each(function(){
    var key = $('td label:first', this).text()
    var value = $('td input:first', this).val();
    arr_storage.push([ key, value ]);
    obj_storage[key] = value;
});

Answer 3

基本上，有几种方法可以做到这一点。基本步骤：

选择所有TD。
遍历它们，将它们添加到您的对象中。

有很多不同的方法可以做到这一点。没有一个是真的错误或正确，但有些可能表现得比其他人更好或更差。如果您需要再次访问这些行或单元格，请考虑一种方法，您可以将其与网站上的其他操作链接起来，或者出于性能原因如何缓存内容。

这是一种使用map( )获取标签/值对象数组的方法，maps array-like structures to an array在以下情况下运行良好：

someObject = $('#metric_summary .editable_metrics td:first-child').map(function(){
    var $el = $(this);
    return { 'label' : $el.find('label').html(), 'value' : $el.next().find('input').val() }
});

可能效率不高，但应该让你开始。

使用jQuery从HTML中的表中检索值？

3 个答案: