JQuery - 从选定的表行获取值

Question

我有一个包含多个元素的表格。第一个元素是一个复选框，它将触发 Javascript 中的事件。我需要做的是:1.检查复选框值是否为true2. 如果为 true，则从表元素中获取值 A。某些列值是文本 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()，或者只是从 child 那里获取 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();

Answer 1

找到复选框:

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

引用文献:

• :checkbox selector .
• :checked selector .
• find() .
• :first selector
• .is() .