1

複数の要素を持つテーブルがあります。最初の要素は、Javascript でイベントをトリガーするチェック ボックスです。1. チェック ボックスの値が true かどうかを確認します。2. true の場合は、テーブル要素から値を取得します。一部の列の値はテキストです b. 一部の列にはテキスト ボックス ( 

    <table class="rowClick" id="page" width="100%">                 
<thead>
    <tr id="p_1">                         
        <th colspan=9 align=center >Select/Change and Update Selections</th>
    </tr>
    <tr id="p_2">
        <th>Select</th>
        <th class="table-sortable:default">Class</th>                    
        <th class="table-sortable:default">Desc</th>
        <th class="table-sortable:default">Weight</th>                         
        <th class="table-sortable:currency">Pott Dia</th>                         
        <th class="table-sortable:currency">Pott Ht</th>                         
        <th class="table-sortable:currency">Pott Stack Ht</th>                         
        <th class="table-sortable:currency">Tower Width</th>
        </tr>
        </thead>                 
        <tbody>
        <tr id="p_3">                             
        <td align=center>
        <input class = "prodSel" type="checkbox" id="chk[]"></td>                             
        <td align=center>00100</td>                             
        <td align=center>C100</td>                             
        <td align=center>XL</td>                             
        <td align=center><input size=5 type="text" value=4.75></td>                             
        <td align=center><input size=5 type="text" value=4.68></td>                             
        <td align=center><input size=5 type="text" value=0.33></td>                             
        <td align=center><input size=5 type="text" value=40.40></td>                             
        </tr>
        <tr id="p_4">                             
        <td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>                             
        <td align=center>00140</td>                             
        <td align=center>C200S</td>                             
        <td align=center>CL</td>                             
        <td align=center><input size=5 type="text" value=6.00></td>                             
        <td align=center><input size=5 type="text" value=5.43></td>                             
        <td align=center><input size=5 type="text" value=0.43></td>                             
        <td align=center><input size=5 type="text" value=42.00></td>                             
        </tr>
        <tr id="p_5">                             
        <td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>                             
        <td align=center>00140</td>                             
        <td align=center>C200S</td>                             
        <td align=center>CU</td>                             
        <td align=center><input size=5 type="text" value=6.00></td>                             
        <td align=center><input size=5 type="text" value=5.43></td>                             
        <td align=center><input size=5 type="text" value=0.43></td>                             
        <td align=center><input size=5 type="text" value=42.00></td>
        </tr>
    </tbody>
  </table>

現在、私は以下を持っています：

    rowSelect: function(event) {
      var work = [];
      //        var rowIndex =   $(this).parent().parent().children().index($(this).parent());
      var chkbox = $(this).closest('tr').find('td:eq(0)').child(0);
      if(null != chkbox && true == chkbox.checked){
        for(var i=0;i<17;i++){
            if(i<3){
                var s = $(this).closest('tr').find('td:eq(i)').text();
            }
            else{
                var s = $(this).closest('tr').find('td:eq(i)').val();
            }
            work[i]=s;
        }
      }
    }

問題は、チェックボックスの値を取得しようとしている最初の部分にあります(チェックされているかどうか)。オブジェクトを取得してから val() をチェックするか、子から val() を取得できると考えましたが、まだ何も機能していません。私が必要としているのは、チェックボックスの値を取得し、テキスト入力ボックスから値を取得する方法です。

私はここで解決策をいじっています：http://jsfiddle.net/radi8/tCh3P/19/

----> 解決方法 <----

わかりました、これが私の最終的な解決策であり、以下に提供されている機能と、見たい人のための他のいくつかの優れた属性を使用しています。配列を使用するのではなく、JSON を設定するように変更しましたが、全体的な機能は有効です。

  var proddta =
  {
   init: function(){
    // hook into the get delete/update buttons
    var del = $("#delete");
    for (var i = 0, ii = del.length; i < ii; i++){
        $(del).bind("click", proddta.deleteListener2);
    }
    var upd = $("#update");
    for (var i = 0, ii = upd.length; i < ii; i++){
        $(upd).bind("click", proddta.updateListener);
    }
},

updateListener: function(event){
    myJSON = new Object();
    $('.prodSel:checked').each(function() {
        proddta.getArrays(this, myJSON);
        var dataString = JSON.stringify(myJSON);
        alert('dastring: '+dataString);
        /*
            var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=1';
            $.post(url, {data: dataString}, function(res){
                proddta.showResult(res);
        });
        */
    });

},

deleteListener2: function(event){
    myJSON = new Object();
    $('.prodSel:checked').each(function(){
        proddta.getArrays(this, myJSON);
        var dataString = JSON.stringify(myJSON);
        /*
           var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=0';
        $.post(url, {data: dataString}, function(res){
            var obj = $.evalJSON(res);
            if(obj.somebool === true)
            $("#result").html(obj.hello + ' ' + obj.array[1] + obj.worked + ". Message from PHP: "+obj.php_message);
        });
        */
        alert('dastring: '+dataString);
    });
},

getArrays: function(evt, myjson){
    var val = proddta.getColumnCount(this);
    $closestTr = $(evt).closest('tr');
    var chkbox = $closestTr.find('td:eq(0)').find(':checkbox');
    if (null !== chkbox && true === chkbox.is(':checked')) {
        var s = '';
        var id = '';
        for (var i = 1; i < val; i++) {
            if (i >= 1 && i < 4) {
                s = $closestTr.find('td:eq(' + i + ')').text();
                id = $closestTr.find('td:eq(' + i + ')').attr('id');
            } else {
                s = $closestTr.find('td:eq(' + i + ')').find(':input').val();
                id = $closestTr.find('td:eq(' + i + ')').find(':input').attr('id');
            }
            myjson[id] = s;
        }
    }
    else {
    // handle this exception...
    }
},

getColumnCount: function(evt){
    var colCount = 0;
    $('tr:nth-child(1) td').each(function () {
        if ($(this).attr('colspan')) {
            colCount += +$(this).attr('colspan');
        } else {
            colCount++;
        }
    });
    alert(colCount);
    return colCount;
 },
 }
 proddta.init();
4

3 に答える 3

2

あなたのコードはたくさんの修正を必要としました、そして最終的にそれは働きました。下記参照、

デモ

rowSelect: function(event) {
    alert('hello 1');
    var work = [];
    var $closestTr = $(this).closest('tr');
    var chkbox = $closestTr.find('td:eq(0)').find(':checkbox');

    alert('hello 2 ' + chkbox.is(':checked'));
    if (null !== chkbox && true === chkbox.is(':checked')) {
        alert('hello 3');
        var s = '';
        for (var i = 0; i < 17; i++) {
            if (i != 0 && i < 4) {
                s = $closestTr.find('td:eq(' + i + ')').text();
            } else {
                s = $closestTr.find('td:eq(' + i + ')').find(':input').val();
            }
            work.push(s);
        }
    }
    else {
        alert('hello 99');
    }
    alert('hello 4 ' + work.join(' '));
}
于 2012-04-13T21:08:22.617 に答える
2

チェックボックスを見つけるには:

var checkbox = $(this).closest().find('input:checkbox:first');
if (checkbox.is(':checked')){
    // checkbox is checked
}

参考文献:

于 2012-04-13T20:44:41.643 に答える
1

chkbox変数宣言を次のように変更します。

var chkbox = $(this).parents('tr').find('input[type=checkbox]').get(0);
于 2012-04-13T20:43:07.937 に答える