JQuery - 从选定的表行获取值

时间:2012-04-13 20:37:06

标签: jquery jquery-ui

我有一个包含多个元素的表。第一个元素是一个复选框,它将在Javascript中触发事件。我需要做的是: 1.检查复选框值是否为true 2.如果为true,则从表元素中获取值    一个。一些列值是文本    湾一些列包含文本框(

    <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/

----&GT;解决方案&lt; ----

好的,这是我的最终解决方案,使用下面提供的功能以及其他任何关心的外观。我将其更改为填充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();

3 个答案:

答案 0 :(得分:2)

要找到复选框:

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

参考文献:

答案 1 :(得分:2)

您的代码需要一堆修复,最后才有效。见下文,

DEMO

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(' '));
}

答案 2 :(得分:1)

chkbox变量声明更改为:

var chkbox = $(this).parents('tr').find('input[type=checkbox]').get(0);