如何使用jquery设置表格单元格的值 [英] How to set table cell value using jquery

问题描述

我想通过遍历它们来设置表格中所有单元格的值。
理想情况下，我想访问一个Html表，如 $（＃tbl）[row] [col] =5

这是行不通的。

  $（document）.ready（function ）{
 for（var row = 0; row< 3; row ++）{
 for（var col = 0; col< 3; col ++）{
 $（＃tbl ）.children（）。children（）[row] .children（）[col] .append（sdfasdf）; 
} 
} 
}）; 
  

这有效，但我不知道为什么!!!

1. 我不明白$（＃tbl）。children（） .children（）为什么需要第二个孩子


2. 为什么第三个孩子不是一个函数，例如像第一个2那样的children（）。
为什么不是一个函数，即innerHTML（）

  $（document）.ready（function（）{
 for（var row = 0; row< 3; row ++） {
 for（var col = 0; col< 3; col ++）{
 $（＃tbl）。children（）。children（）[row] .children [col] .innerHTML = H！; 
} 
} 
}）; 
  

解决方案

如果你只是想遍历表中的每个单元格，下面的任何一个都可以工作：

  $（'＃tbl td'）。each（function（）
 {
 var $ cell = $（this）; 
 //对当前< td> 
}}执行一些操作; 
 $ b //或
 
 $（'＃tbl tr'）。each（function（）
 {
 var $ row = $（this ）; 
 $ row.children（）。each（function（）
 {
 var $ cell = $（this）; 
 //使用当前< tr> ;和< td> 
}）; 
}）; 
  

---

如果您想像数组那样访问表，你将不得不自己创建一个数组：

  var arr = $（'＃tbl> tbody> （）函数（）
 {
 return $（this）.children（）。map（function（）
 {
 return $（this）; 
}）; 
}）; 
  

然而，jQuery并没有公开一个API，以至于您（永远）无法做到简单赋值，如 arr [row] [col] = 5; 。使用上面的数组，这将起作用：

  arr [row] [col] .text（5）; 
  

Demo / h3>

（1）我不明白$（＃tbl）。children（）。children（）为什么需要第二个孩子

由于jQuery的 .children（）函数仅返回一组元素的< （2）为什么是后代，而不是所有后代（例如儿童+孙辈+ ...）。b
$ b

因为当你使用数组表示法来访问jQuery的元素时集合，你可以找回底层的DOM元素，而不是一个jQuery对象。使用 .eq（i） 而不是 [i] ：

  $（＃tbl）。children（） 。儿童（）当量（行）。儿童（）当量（COL）.append（ sdfasdf）。。 
  

（3）为什么不是innerHTML函数，即innerHTML（ ）

正如你在问题＃2的答案中， ... children（）[col] 返回一个DOM元素，而不是一个jQuery对象。大多数浏览器支持DOM element.innerHTML 财产。

当使用 .eq（i）而不是 [ i] ，如上所述，使用 .html（） code> jQuery函数。

I would like to set the value of all the cells of a table by iterating through them. Ideally I would like to access a Html table like an array i.e. $("#tbl")[row][col]="5"

This does not work.

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children()[col].append("sdfasdf");
        }
    }
});

This works but I dont know why!!!

1. I dont understand $("#tbl").children().children() why the need for the 2nd children
2. Why is the 3rd children not a function i.e. children() like the 1st 2.

3. Why is'nt innerHTML not a function i.e. innerHTML()

   $(document).ready(function() {
       for (var row = 0; row < 3; row++) {
           for (var col = 0; col < 3; col++) {
               $("#tbl").children().children()[row].children[col].innerHTML = "H!";
           }
       }
   });
   

解决方案

If you just want to iterate over each cell in the table, either of the following will work:

$('#tbl td').each(function ()
{
    var $cell = $(this);
    // do something with the current <td>
});

// or,

$('#tbl tr').each(function ()
{
    var $row = $(this);
    $row.children().each(function ()
    {
        var $cell = $(this);
        // do something with the current <tr> and <td>
    });
});

---

If you want to access the table like an array, you're going to have to build an array yourself:

var arr = $('#tbl > tbody > tr').map(function ()
{
    return $(this).children().map(function ()
    {
        return $(this);
    });
});

However, jQuery doesn't expose an API such that you'll (ever) be able to do simple assignment, as in arr[row][col] = 5;. With the above array, this will work:

arr[row][col].text(5);

Demo

---

Edit

(1) I dont understand $("#tbl").children().children() why the need for the 2nd children

Because jQuery's .children() function only returns a set of the element's immediate descendants, not all descendents (e.g. children + grandchildren + ...).

(2) Why is the 3rd children not a function i.e. children() like the 1st 2.

Because when you use array notation to access elements of a jQuery collection, you get back the underlying DOM element, not a jQuery object. Use .eq(i) instead of [i]:

$("#tbl").children().children().eq(row).children().eq(col).append("sdfasdf");

(3) Why is'nt innerHTML not a function i.e. innerHTML()

As in the answer to your question #2, ...children()[col] returns back a DOM element, not a jQuery object. Most browsers support the DOM element.innerHTML property.

When using .eq(i) instead of [i], as above, use the .html() jQuery function.

这篇关于如何使用jquery设置表格单元格的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！