Question

我尝试根据选中的复选框更新我的数据表。我能够在数据表中显示指定的列，具体取决于选中的复选框...但是当选中多个复选框时，我无法显示任何内容。

当选择多个复选框时，我应该如何在数据表中显示多个列？ ...请帮忙。

这是我的代码

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
     google.charts.load('current', {'packages':['table']});
       google.charts.setOnLoadCallback(cal);
    function cal()
    {
     var data = new google.visualization.DataTable();
     var newData = [
            ['What is your name?', 'What is your age?','How do you get to work?' ,'How long is your commute?' ],
            ['2005',  '1170',      '460'    ,  '421'   ],
            ['2006',  '660',       '1120'    ,  '4324'  ],
            ['2007',  '1030',      '540'     ,  '4234'  ],
            ['2008',  '1530',      '50'     ,    '234'  ]];
            var numRows = newData.length;
          var numCols = newData[0].length;


    if(document.getElementById('cb1').checked==true)
    {
    data.addColumn('string', newData[0][0]);
     for (var i = 1; i < numRows; i++)
           data.addRow([newData[i][0]]);
    }
     if(document.getElementById('cb2').checked==true)
    {
     data.addColumn('string', newData[0][1]);
     for (var i = 1; i < numRows; i++)
            data.addRow([newData[i][1]]); 
    }
     if(document.getElementById('cb3').checked==true)
    {
     data.addColumn('string', newData[0][2]);
     for (var i = 1; i < numRows; i++)
            data.addRow([newData[i][2]]); 
    }
     if(document.getElementById('cb4').checked==true)
    {
     data.addColumn('string', newData[0][3]);
     for (var i = 1; i < numRows; i++)
            data.addRow([newData[i][3]]); 
    }
    var table = new google.visualization.Table(document.getElementById('tablechart'));
          table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }
    </script>
  </head>
  <body>
    <form name="myform">
    <input type="checkbox" name="c1" id="cb1">What is your name?
     <input type="checkbox" name="c1" id="cb2">What is your age?
      <input type="checkbox" name="c1" id="cb3">How do you get to work?
       <input type="checkbox" name="c1" id="cb4">How long is your commute?
       <input type="button" name="b1" onclick="cal()">Submit
    </form>
     <div id="tablechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

当只选中一个复选框时，我能够显示单个列。但是当选中多个复选框时，无法在数据表中显示/添加多个列。请帮助。

谢谢：）

如何在完成特定选择后每次都将列添加到数据表中？

0 个答案: