jquery数据表更新单元格

发布于 2024-09-24 07:45:27 字数 1653 浏览 1 评论 0原文

我有一个表格,如下所示:

<table id="myTable">
  <thead>
    <tr>
      <td><input type="checkbox" id="selectall" /></td>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

然后,javascript:

var myTable = jQuery('#myTable').dataTable({
    /* options */
});

// Ajax request to populate:
jQuery.get('script.php', function(data){
    eval("rows="+data);
    for(var i=0;i<rows.length;i++){
        myTable.fnAddData([
          "<input type=\"checkbox\" id=\""+rows[i].uniqueID+"\" />",
          rows[i].col1Txt,
          rows[i].col2Txt,
          rows[i].col3Txt,
          rows[i].col4Txt,
          rows[i].col5Txt ]);
    }
});

现在,我在根据选定的复选框更新表格时遇到问题:

我正在尝试更新选中的每行中的第 5 个单元格。我使用 fnUpdatefnGetPosition 的组合(http: //www.datatables.net/api)。

fnGetPosition 需要 tdtr 元素,所以我想我只需抓住复选框的父 td

var checkBoxes = jQuery('td > input:checked', myTable);
for(var i=0;i<checkBoxes.length;i++){
    var parentTD = jQuery('#'+checkBoxes[i].id).parent(); //seems wrong?
    var pos = myTable.fnGetPosition(parentTD);
    //alert(pos[0]);
    myTable.fnUpdate('Updated text', pos[0], 5);
}

但我一定是做错了,因为 pos 似乎从来没有值。

有什么想法吗?

I have a table set out like:

<table id="myTable">
  <thead>
    <tr>
      <td><input type="checkbox" id="selectall" /></td>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
      <td>Column 5</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Then, the javascript:

var myTable = jQuery('#myTable').dataTable({
    /* options */
});

// Ajax request to populate:
jQuery.get('script.php', function(data){
    eval("rows="+data);
    for(var i=0;i<rows.length;i++){
        myTable.fnAddData([
          "<input type=\"checkbox\" id=\""+rows[i].uniqueID+"\" />",
          rows[i].col1Txt,
          rows[i].col2Txt,
          rows[i].col3Txt,
          rows[i].col4Txt,
          rows[i].col5Txt ]);
    }
});

Now, I am having trouble with updating the table based on which checkboxes are selected:

I am trying to update the 5th cell in each row that is checked. I am using a combination of fnUpdate and fnGetPosition (http://www.datatables.net/api).

fnGetPosition expects the td or tr element, so I thought I'd just grab the parent td of the checkboxes:

var checkBoxes = jQuery('td > input:checked', myTable);
for(var i=0;i<checkBoxes.length;i++){
    var parentTD = jQuery('#'+checkBoxes[i].id).parent(); //seems wrong?
    var pos = myTable.fnGetPosition(parentTD);
    //alert(pos[0]);
    myTable.fnUpdate('Updated text', pos[0], 5);
}

But I must be doing parentTD wrong since pos never seems to hold a value.

Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

穿越时光隧道 2024-10-01 07:45:27

您可以使用 each 函数来迭代 jQuery 对象,它比使用 for 循环更容易。

另外,我认为您可以优化选择器来获取 td 元素,而不是获取已检查的输入。

它将提高性能,因为它应该在每个操作中删除 2 个选择器。
我还没有尝试过,但类似的东西应该有效

var checkBoxes = jQuery('td:has(input:checked):not(#selectall)', myTable);
checkboxes.each(function(){
    var pos = myTable.fnGetPosition($(this)); // Im not familiar with the plugin so the extra $() might be overkill
    alert(pos) // maybe run this alert again, check if you get back an object/value? use firebug to debug and see its value?
    myTable.fnUpdate('Updated text', pos[0], 5);
});

you can use the each function to iterate over a jQuery object, its easier than using the for loop.

Also, I think that you can optomise your selector to get you the td elements instead of geting the checked inputs.

It will be a lot more performant as it should remove 2 selectors in every operation.
I haven't tried it but something like this should work

var checkBoxes = jQuery('td:has(input:checked):not(#selectall)', myTable);
checkboxes.each(function(){
    var pos = myTable.fnGetPosition($(this)); // Im not familiar with the plugin so the extra $() might be overkill
    alert(pos) // maybe run this alert again, check if you get back an object/value? use firebug to debug and see its value?
    myTable.fnUpdate('Updated text', pos[0], 5);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文