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 コードは次のとおりです (このコードは Web で見つかりました、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 に答える