Question

我想将我的表格转换为HTML格式。我正在尝试从input text fields而不是input checkbox fields中获取数据以下是我的javascript代码，可以在fiddle中找到：

$(document).ready(function(){
$('#hello').click(function(e) {     
var array = [];
var headers = [];
$('#my_table tr:first-child td').each(function(index, item) {
    headers[index] = $('> input[type="text"]', item).val();
});
$.each(headers, function(index, item) {
        var name=item;
    var data =[];
    $('#my_table tr:first-child').nextAll().each(function() {
        $('td:nth-child('+(index+1)+')', $(this)).each(function(index, item) {
            data.push(parseInt($('> input[type="text"]', item).val()));
        });
        });
    array.push({name: name, data:data});
    });
  var categories=array[0].data;
  alert(categories);
  array.shift();
                var chart= new Highcharts.Chart({ chart: {
        renderTo: 'container'
     },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: array
        });
        });
        });

我的代码应该将第一列作为xaxis。为此，它应该跳过复选框列。但是，jquery选择器似乎不区分两种类型的输入并跳过列类型。为了实现我的目的，我应该做些什么？

Answer 1

有两个主要原因：

在构建标题的循环中，您不会过滤掉第一列。是的，input[type="text"]选择器不会为第一列提供结果，但它仍会在headers数组中生成一个条目。相反，将input选择器移动到主选择器中，这样您就不会访问第一列
在您构建array变量的循环中，您可以通过选择器td访问td:nth-child('+(index+1)+')'，但由于index值从0开始，您将访问第1个孩子，这仍然是第一列。所以你需要在那里写index+2。

通过一些其他改进（使用map对生成数组非常有用），可以使用以下代码：

    var headers = $('#my_table tr:first-child input[type="text"]').map(function() {
        return $(this).val();
    }).get();
    var array = $.map(headers, function(item, index) {
        var name = item;
        var data = $('#my_table tr td:nth-child('+(index+2)+') input[type="text"]')
            // slice(1) will skip the first row (alternative to your method)
            .slice(1).map(function() {
                return +($(this).val()); // unitary + will do number conversion
            }).get();
        return {name: name, data: data};
    });
    var categories = array.shift().data;
    var chart= new Highcharts.Chart({ chart: {
        // ... etc.

在this updated jsfiddle输入一些输入后，我得到了这个结果：

区分jquery选择器中的文本和复选框

1 个答案: