使用 jQuery、XML、JSON、JS 遍历表答案

【问题标题】：Traverse a table using jQuery, XML, JSON, JS使用 jQuery、XML、JSON、JS 遍历表
【发布时间】：2014-03-17 08:14:07
【问题描述】：

抱歉标题误导了，但我不知道该怎么写。

我有下表...

我想制作一个简单的计算器，它可以根据 2 个给定参数比较一行中的所有数据。

我会要求我的用户先选择一个国家，然后在该列中选择一个值。完成此操作后，您可以提交表单，它会从给定行输出正确的值...

我做了一个小提琴来尝试表达我的意思......

http://jsfiddle.net/SLCaN/2/

最好的方法是什么？我知道的唯一方法是编写一个巨大的 if/else 语句，这将花费我永远的时间来编写。

$('.country').on('change', function(){
// If USA show corrent dropdown
if( $(this).val() == 'usa'){
    $('.hiddenGrade').hide();
    $('.iniValusa').show();
} else if( $(this).val() == 'gb'){
    $('.hiddenGrade').hide();
    $('.iniValgb').show();
} else {
    $('.hiddenGrade').hide();
    $('.iniValfr').show();
}
});

$('input[type="submit"]').on('click', function(e){
    e.preventDefault();
    $('p').text('Values output here');
});

如果您选择French 和5a+，您将在输出中得到5.8 and V-Diff...

【问题讨论】：

您是否考虑过使用 JavaScript 对象作为地图？ country 选择的值将是属性名称，然后属性的值可以是用于显示 div 的选择器。或者，您可以将国家/地区选择的值连接到您的 jQuery 选择器的类名。
您是否还尝试从 JavaScript 中的表格内容动态生成 <select> 选项，或者您的后端代码已经处理了该问题？
不太清楚你想在这里做什么。另外，我不确定当您选择French 和5A+ 时，您希望如何获得5.8 and V-Diff 作为输出？输出不应该是'' and V-Diff吗？
@Liam 你真的应该在这里澄清你需要什么。请发布确切的输入样本以及预期的 exact 输出，因为对于其他 cmets，您需要什么并不明显。我们可以在三天前解决它，而您不必花费 500rep 来获得赏金。
这些值是否源自 HTML 表格？ JSON 对象？

标签： javascript jquery html xml json

【解决方案1】：

crush 的解决方案在我看来是最实用的。您在单个变量中定义数据，然后使用它来填充两个 SELECT。然而，考虑到迈克尔的解决方案可以更好地降级：我对美眉的解决方案的看法，如果禁用 Javascript，会给你一个空白页面。

您将所有数据保存在一个 Javascript 对象中，并对这些值进行索引，以便相同的成绩具有相同的索引（表中的行号）：

 4: "quatrième valeur pour les français",
 ...
 4: "Fourth value for UK",

这种方法可以更轻松地（我相信）将一个数组“翻译”成另一个数组，即选择法国，获得 5b 级，将法国更改为美国：值保持不变，这表示显示的等级会更改为新国家/地区的相应值。

此外，您将所有数据保存在一个地方。

对于大型国家/地区数组，我建议将 grades[countryCode] 转换为 AJAX 调用以从服务器获取该特定国家/地区。您还需要另一个 AJAX 调用来仅从服务器获取代码。

  var grades = {
    fr: {
        name: 'France',
        values: {
            0: "4",
            1: "4",
            2: "5a",
            3: "5a+",
            4: "5b",
            5: "5b+",
            6: "5c",
            7: "5c+",
            8: "6a",
            9: "6a+",
           10: "6b"
        }
     },
 us:    {
        name: 'USA',
        values: {
            0: "5.6",
            1: "5.6",
            2: "5.7",
            3: "5.7",
            4: "5.8",
            5: "5.8",
            6: "5.9",
            7: "5.10a",
            8: "5.10b",
            9: "5.10c",
           10: "5.10d"
        }
    },
'gb': {
        name: 'UK',
        values: {
            0: "",
            1: "Mod",
            2: "Diff",
            3: "V-Diff",
            4: "4a",
            5: "4b",
            6: "4b VS",
            7: "4c HVS",
            8: "5a E1",
            9: "",
           10: ""
        }
  }
}


  function setSelectTo(country) {
      // TODO: verify that country is indeed in grades
      var data = grades[country].values;
      var $el = $("#gradeSelect");
      $cur = $el.val();
      $el.empty();
      $.each(data, function(value, text) {
          $el
             .append($("<option></option>")
             .attr("value", value)
             .text(text));
      });
      // Restore value
      $el.val($cur);
  }
  function populateCountrySelect() {
      var $el = $("#countrySelect");
      $el.empty();

      $.each(grades, function(code, data) {
          $el
             .append($("<option></option>")
             .attr("value", code)
             .text(data.name));
      });
  }

  $('#countrySelect').on('change', function(){
      setSelectTo($(this).val());
  });

  populateCountrySelect();
  $('#countrySelect').val('us');
  setSelectTo('us');
  $('#gradeSelect').val(2);

这是更新后的sample fiddle - 抱歉，第一个 URL 错误 - HTML 非常小：

Choose your country: <select id="countrySelect"></select>
<br />
Choose your grade: <select id="gradeSelect"></select>

【讨论】：

【解决方案2】：

Iserni 的答案非常接近您的需要，但我认为他们错过了输出部分，除非我错误地阅读/理解了代码。

为了稍微调整这个答案，我会将数据结构更改为：

var grades = [
{'fr': "4", 'usa': "5.6",'gb': ""},
{'fr': "4", 'usa': "5.6",'gb': "Mod"},
{'fr': "5a",    'usa': "5.7",'gb': "Diff"},
{'fr': "5a+",   'usa': "5.7",'gb': "V-Diff"},
{'fr': "5b",    'usa': "5.8",'gb': "4a"},
{'fr': "5b+",   'usa': "5.8",'gb': "4b"},
{'fr': "5c",    'usa': "5.9",'gb': "4b VS"},
{'fr': "5c+",   'usa': "5.10a",'gb': "4c HVS"},
{'fr': "6a",    'usa': "5.10b",'gb': "5a E1"},
{'fr': "6a+",   'usa': "5.10c",'gb': ""},
{'fr': "6b",    'usa': "5.10d",'gb': ""}];

然后在你的点击事件中，这样的事情会让你得到翻译的值（你需要稍微调整一下）

$('input[type="submit"]').on('click', function(e){
   e.preventDefault();
   var matches = $.grep(grades,function(e) {
     return e[$(".country").val()] == $('.iniValusa').val()
   });

   if(matches.length == 1)
   {
     $('p').text('USA: ' + matches[0].usa + ' GB: ' + matches[0].gb + 'FR: ' + matches[0].fr);
   } 
});

【讨论】：

是的，也许“翻译”部分有点晦涩难懂。我将编辑我的答案。

【解决方案3】：

肯定有不同的方法可以做到这一点，但在我看来，它归结为数据结构。我个人的看法是使用具有一系列国家和等级的数据结构。然后，成绩实际上是成对的（显示值/实际值），以说明数据中的差距。这里的技巧是我们不想在选择中显示空显示值，但我们确实需要数据（实际值）进行转换。之后，jQuery 的东西就很简单了。

这样的数据：

var countryGrades = [
    { country : "France", grades : [ 
        ["4", "4"], 
        ["", "4"], 
        ["5a", "5a"], 
        ["5a+", "5a+"], 
        ["5b", "5b"],
        ["5b+", "5b+"], 
        ["5c", "5c"],
        ["5c+", "5c+"],
        ["6a", "6a"],
        ["6a+", "6a+"],
        ["6b", "6b"] 
    ]},
    { country : "USA", grades : [ 
        ["5.6", "5.6"], 
        ["", "5.6"], 
        ["5.7", "5.7"], 
        ["", "5.7"], 
        ["5.8", "5.8"], 
        ["", "5.8"], 
        ["5.9", "5.9"], 
        ["5.10a", "5.10a"], 
        ["5.10b", "5.10b"], 
        ["5.10c", "5.10c"], 
        ["5.10d", "5.10d"]
    ]},
    { country : "UK", grades : [ 
        ["", ""], 
        ["Mod", "Mod"], 
        ["Diff", "Diff"], 
        ["V-Diff", "V-Diff"], 
        ["4a", "4a"], 
        ["4b", "4b"], 
        ["4b VS", "4b VS"], 
        ["4c HVS", "4c HVS"], 
        ["5a E1", "5a E1"], 
        ["", ""], 
        ["", ""]
    ]}
];

事件处理等类似这样：

function loadGrades(countryGradesIndex) {
    var gradeSelect = $("#grade");
    gradeSelect.empty();        
    $.each(countryGrades[countryGradesIndex].grades, function(index, grade) {
        if (grade[0] != "") {
            gradeSelect.append($("<option></option>").attr("value", index).text(grade[0]));
        }           
    });
}

$.each(countryGrades, function(index, countryGrade) {       
    $("#country").append($("<option></option>").attr("value", index).text(countryGrade.country));
});

$("#country").on("change", function() {
    loadGrades($("#country").val());
});

loadGrades(0);

$("#convert").on("click", function() {
    var gradeIndex = $("#grade").val();
    var gradeConversion = "";
    $.each(countryGrades, function(countryGradesIndex) {
        gradeConversion += countryGrades[countryGradesIndex].country + ": " + countryGrades[countryGradesIndex].grades[gradeIndex][1] + "<br>";
    });

    $("#conversions").html(gradeConversion);
});

在这里查看一个有效的 JSFiddle：http://jsfiddle.net/tetonraven/SVj63/

【讨论】：

【解决方案4】：

根据我的理解，添加我的 2 便士来访问数据，希望对您有所帮助。

像每个第一个选择值和等级值数组一样保留数据。

 var data = { 
 fr :new Array("4","4","5a","5a+", "5b","5b+","5c","5c+","6a","6a+", "6b"),  

 usa : new Array(  "5.6","5.6","5.7", "5.7","5.8", "5.8", "5.9", "5.10a", "5.10b","5.10c", "5.10d"), 

 gb : new Array (  "", "Mod","Diff","V-Diff", "4a","4b", "4b VS", "4c HVS", "5a E1", "","")                            

};

然后编写方法以在点击国家/地区时填充该等级。

function populate(val)
{    
      $("#grade").empty();   
    var array = data[val];   
   for(var a=0; a<array.length; a++ ) {
     $("#grade").append('<option value="'+ a +  '">' +  array[a] + '</option>');
}    
 }    
}

然后调用类似的方法 ::

$("document").ready(function () { populate('usa'); } );
$('.country').on('change', function(){
    populate($(this).val());  
});

Html 将很简单（只有您需要按国家/地区填充 [U 也可以编写将它们填充到准备好的文档中的方法]。这是打印所有内容以选择索引的输出方式：{根据您的预期 o/ p 我的理解是你跳过空值，你可以在这里添加条件如果是这样的情况： if(data[a][index] == '') data[a][index+1] （虽然你必须注意数组 len 等）}

$('input[type="submit"]').on('click', function(e){
    e.preventDefault();
    var index = $('#grade').find(":selected").val();
     var str = "";
     for(var a in data)
     {         
        str  = str +" " + $('.country option[value="' + a + '"]').html() 
        +" " + data[a][index];
    }
    $('p').text('Values output here ' + str);
 });

DEMO

【讨论】：

【解决方案5】：

好吧，我不知道你想要什么。但我用html table + jQuery 试过了，这就是你能得到的。

演示http://jsfiddle.net/yeyene/xEzLv/

你只需要 3 个 if 语句就可以看到结果了。

$('.country').on('change', function(){
    $('.hiddenGrade').hide();
    $('#s_'+$(this).val()).show();
    $('#cn').val($(this).val());
    $('#result').val('');
});
$('.hiddenGrade').on('change', function(){
    $('#cn_val').val($(this).val());
    $('#chart tr').css('background', 'none');
    $('#chart tr').eq($(this).val()).css('background', 'green');
});

$('input[type="submit"]').on('click', function(e){
    e.preventDefault();
    if($('#cn').val() === '0'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(1).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(2).text()   
        );
    }
    if($('#cn').val() === '1'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(0).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(2).text()   
        );
    }
    if($('#cn').val() === '2'){
        $('#result').val(
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(0).text()+', '+
            $('#chart tr').eq($('#cn_val').val()).find('td').eq(1).text()   
        );
    }
});

【讨论】：

检查我的答案，您可能已经阅读了所有 if 语句。

【解决方案6】：

我不喜欢其他答案的大量代码。检查小提琴http://jsfiddle.net/vittore/kP249/1/。

Just put data in table:

<select id='country'>
    <option value="0">Fr</option>
    <option value="1">Us</option>
    <option value="2">Uk</option>
</select>
<input id='score' type="text" />    

<table id="results">
    <thead><tr><td>Fr</td><td>Us</td><td>Uk</td></tr></thead><tbody>
    <tr><td>4</td><td>5.6</td><td></td></tr>
    <tr><td>4</td><td>5.6</td><td>Mod</td></tr>
    <tr><td>5a</td><td>5.7</td><td>Diff</td></tr>
    <tr><td>5a+</td><td>5.7</td><td>V-Diff</td></tr>
    <tr><td>5b</td><td>5.8</td><td>4a</td></tr>
    <tr><td>5b+</td><td>5.8</td><td>4b</td></tr>
    <tr><td>5c</td><td>5.9</td><td>4b VS</td></tr>
    <tr><td>5c+</td><td>5.10a</td><td>4c HVS</td></tr>
    <tr><td>6a</td><td>5.10b</td><td>5a E1</td></tr>
    <tr><td>6a+</td><td>5.10c</td><td></td></tr>                   
</tbody></table>

并添加一点点javascript：

var $score = $('#score'), $country = $('#country')
  , $results = $('#results'), $rows = $results.find('tbody tr')

$rows.hide()

$results.on('scoreChanged', function(e, country, score) {
    $rows.hide().filter(function(i) {
        return $(this).find('td:eq(' + country + ')').text() == score
    }).show()
})

$score.on('submit, blur', function(e) {
  $results.trigger('scoreChanged', [$country.val(), $score.val()])  
})

$country.on('changed', function(e) {
  $results.trigger('scoreChanged', [$country.val(), $score.val()])  
})

注意：您可以稍微更改过滤条件并更友好地显示结果（fiddle）：

$results.on('scoreChanged', function(e, country, score) {
    $rows.hide().filter(function(i) {
        return $(this).find('td:eq(' + country + ')').text().contains(score)
    }).show()
})

【讨论】：

【解决方案7】：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var values = [['', '', ''], ['4', '5.6', 'x'], ['5a', '5.7', 'dif']];
            var countries = ['-', 'fr', 'us', 'uk'];
            var jq_country =  $('.country'), jq_grade = $('.grade');

            $.each(countries, function(index, val){
               jq_country.append('<option data-index="' + index + '">' + val + '</option>');                
            });

            var curr_col, curr_index;

            jq_country.change(function() {
                jq_grade.empty();     
                $('.result').val('');

                curr_col = parseInt($(this).find('option:selected').data('index')) - 1;     

                if (curr_col >= 0) {

                    $.each(values, function(index, val) {

                        jq_grade.append('<option ' + (index == curr_index ? 'selected' : '' ) +  ' value="' + index + '">' + val[curr_col] + '</option>')   
                    });


                    jq_grade.change();
                }

            });

            jq_grade.change(function() {
                curr_index = parseInt(jq_grade.val());
                if (curr_index) {
                    var result = '';
                    $.each(countries.slice(1), function(index, val){
                        if (index != curr_col) result += val + ':' + values[curr_index][index] + ';';
                    });

                    $('.result').val(result);
                }
                else {
                    $('.result').val('');
                }
            });            

        })
    </script>

</head>
<body>
    <form method="post">
       <select class="country"></select>
      <select class="grade"></select>
      <input type="text" class="result" />
   </form>

</body>
</html>

【讨论】：