1

我有一个包含多个元素的表格。第一个元素是一个复选框，它将触发 Javascript 中的事件。我需要做的是： 1. 检查复选框值是否为真 2. 如果为真，则从表元素中获取值 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()，或者只是从孩子那里得到 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

要找到复选框：

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

参考：

于 2012-04-13T20:44:41.643 回答
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 回答
1

chkbox将您的变量声明更改为：

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