0

抱歉，说到 JQUERY，我真的很绿。我有以下 html 代码，它基本上使用和复选框制作了一个带有文本的表格。

<html>
<head>
<script type="text/javascript" src="table2CSV.js" > </script>
<script>
function getCSVData()
{
     var csv_value=$('#tblGrid').table2CSV({delivery:'value'});
     $("#csv_text").val(csv_value);
}
</script>
</head>
<body>
<table>
   <tr>
     <td class="cellText">HB DIOCD - AR3 HT</td>
       <td width="60" align="center">
          <input class="chText" type="checkbox" checked="checked" value="X" name="options" />
     </td>
        <td width="60" align="center">
           <input class="chText" type="checkbox" checked="checked" value="X" name="options" />
      </td>
      <td width="60" align="center">
         <input class="chText" type="checkbox"  name="options"/>
      </td>
   </tr>
</table> 
<form action="getCSV.php" method ="post" >
<input type="hidden" name="csv_text" id="csv_text">
<input type="submit" value="Save Configuration" onclick="getCSVData()"></form>
</body>
</html>

接下来是 jquery 代码（在网络上找到此代码，KunalBabre.com - table2CSV）。当只有文本时它做得很好：

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {

           tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

   row2CSV(tmpRow);
    // actual data   
    $(el).find('tr').each(function() 
     {
        var tmpRow = [];
        var valArray=[];
        $(this).filter(':visible').find('td').each(function()
        {   
             if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
   });        
       //alert(tmpRow);
       row2CSV(tmpRow);
   });
   if (options.delivery == 'popup') {
       var mydata = csvData.join('\n');
       return popup(mydata);
   } else {
       var mydata = csvData.join('\n');
       return mydata;
   }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
       if (tmpRow.length > 0 && tmp != '') {
           var mystr = tmpRow.join(options.separator);
           csvData[csvData.length] = mystr;
      }
  }
   function formatData(input) {
      // replace " with “
      var regexp = new RegExp(/["]/g);
      var output = input.replace(regexp, "“");
      //HTML
      var regexp = new RegExp(/\<[^\<]+\>/g);
          var output = output.replace(regexp, "");
       if (output == "") return '';
       return '"' + output + '"';
  }
  function popup(data) {
      var generator = window.open('', 'csv', 'height=400,width=600');
       generator.document.write('<html><head><title>CSV</title>');
       generator.document.write('</head><body >');
       generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
       generator.document.write(data);
       generator.document.write('</textArea>');
       generator.document.write('</body></html>');
       generator.document.close();
       return true;
    }
};

执行时的代码返回标签内的数据，但不返回标签内的值。

这是输出示例：“HB DIOCD - AR3 HT”,,,

我想要的是：“HB DIOCD - AR3 HT”，X，X，

在脚本的实际数据部分中，我成功地从输入复选框中获取了各个值，但是我不知道如何获取与值连接的文本。

谢谢你的帮助，

CPAZ

4

2 回答 2

2

好吧，您的复选框具有保存值，因此对您没有太大用处。但无论如何，你可以这样做：

var outputArr = [];

$('td').each(function() {
   output.push($(this).find('input').val() || $(this).text());
});

var output = outputArr.toString();
于 2012-06-16T02:29:15.410 回答
0

通过根据单元格文本提供复选框名称并将表格包装在其自己的<form id="myDummyForm">...</form>标签中，您可以利用 jQuery轻松地将对$(formSelector).serialize()格式化name=value为字符串。

然后，您可以进行一些简单的（？）字符串处理以获取所需格式的数据。

HTML：

<form id="myDummyForm">
<table>
   <tr>
     <td class="cellText">HB DIOCD - AR3 HT</td>
     <td width="60" align="center">
          <input class="chText" type="checkbox" checked="checked" value="X" name="HB DIOCD_AR3_HT_1" />
     </td>
     <td width="60" align="center">
           <input class="chText" type="checkbox" checked="checked" value="X" name="HB DIOCD_AR3_HT_2" />
     </td>
     <td width="60" align="center">
         <input class="chText" type="checkbox" name="HB DIOCD_AR3_HT_3"/>
     </td>
   </tr>
</table>
</form>

Javascript：

jQuery.fn.table2CSV = function(options) {
    ...
    var arr = $("#myDummyForm").serialize().split('&');
    ...
};

因此，您的 javascript 将被简化，但代价是涉及更多的 HTML。

稍加想象，您可以动态设置输入的名称（再次使用 jQuery），以避免必须手动进行（或者如果页面是在服务器端构建的，则以程序方式进行）。

于 2012-06-16T05:28:02.440 回答