计算表格行中的列数

Question

我有一张类似于：

的表格

<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

我想计算一行中td元素的数量。我在尝试：

document.getElementById('').cells.length;
document.getElementById('').length;
document.getElementById('').getElementsByTagName('td').length;

没有显示实际结果。

Answer 1

document.getElementById('table1').rows[0].cells.length

单元格不是表的属性，行是。虽然单元格是行的属性

Answer 2

你可以做到

alert(document.getElementById('table1').rows[0].cells.length)

在这里摆弄http://jsfiddle.net/TEZ73/

Answer 3

首先，当您致电getElementById时，您需要提供身份证明。 O_O

dom中唯一带有id的项目是table元素。如果可以，您可以为tr元素添加ID（确保它们是唯一的）。

或者，您可以使用getElementsByTagName('tr')获取文档中tr个元素的列表，然后获取tds的数量。

here is a fiddle that console logs the results...

Answer 4

为什么不使用reduce以便我们考虑colspan？ ：）

function getColumns(table) {
    var cellsArray = [];
    var cells = table.rows[0].cells;

    // Cast the cells to an array
    // (there are *cooler* ways of doing this, but this is the fastest by far)
    // Taken from https://stackoverflow.com/a/15144269/6424295
    for(var i=-1, l=cells.length; ++i!==l; cellsArray[i]=cells[i]);

    return cellsArray.reduce(
        (cols, cell) =>
            // Check if the cell is visible and add it / ignore it
            (cell.offsetParent !== null) ? cols += cell.colSpan : cols,
        0
    );
}

Answer 5

统计table1中的所有 td ：

console.log(
table1.querySelectorAll("td").length
)

<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

将所有td计入table1的每个 tr 。

table1.querySelectorAll("tr").forEach(function(e){
 console.log( e.querySelectorAll("td").length )
})

<table id="table1">
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
</tr>
<table>

Answer 6

如果colspan或rowspan都设置为1，则对子td进行计数将给出正确的答案。但是，如果有跨度，即使行的td的最大数量，我们也无法精确计算列数。考虑以下示例：

var mytable = document.getElementById('table')
for (var i=0; i < mytable.rows.length; ++i) {
	document.write(mytable.rows[i].cells.length + "<br>");
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 3px;
}

<table id="table">
    <thead>
        <tr>
            <th colspan="2">Header</th>
            <th rowspan="2">Hi</th>
        </tr>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">hello</td>
            <td>world</td>
        </tr>
        <tr>
            <td>hello</td>
            <td colspan="2">again</td>
        </tr>
    </tbody>
</table>

Answer 7

<table id="table1">
<tr>
  <td colspan=4><input type="text" value="" /></td>

</tr>
<tr>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>
  <td><input type="text" value="" /></td>

</tr>
<table>
<script>
    var row=document.getElementById('table1').rows.length;
    for(i=0;i<row;i++){
    console.log('Row '+parseFloat(i+1)+' : '+document.getElementById('table1').rows[i].cells.length +' column');
    }
</script>

结果：

Row 1 : 1 column
Row 2 : 4 column

Answer 8

对td元素进行计数以获取表中的列数是一个坏主意，因为td元素可以用colspan跨越多个列。

这是一个使用jquery的简单解决方案：

var length = 0;
$("tr:first").find("td,th").each(function(){
	var colspan = $(this).attr("colspan");
  if(typeof colspan !== "undefined" && colspan > 0){
  	length += parseInt(colspan);
  }else{
        length += 1;
  }
});

$("div").html("number of columns: "+length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>single</td>
  <td colspan="2">double</td>
  <td>single</td>
  <td>single</td>
</tr>
</table>
<div></div>

有关普通的Javascript解决方案，请参阅Emilio的答案。

Answer 9

这是一个考虑到 colspan 的简洁脚本。

numCols 如果表格没有行或列，则为 0，并且无论某些单元格是否跨越多行或多列，它都等于列数，只要表格标记有效，并且没有比表中列数短或长的行。

    const table = document.querySelector('table')
    const numCols = table.rows[0]
        ? [...table.rows[0].cells]
            .reduce((numCols, cell) => numCols + cell.colSpan , 0)
        : 0

Answer 10

- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];
    [btnBell setBackgroundImage:[UIImage imageNamed:@"Bell.png"]];
    [self performSelector:@selector(checkCount) withObject:nil afterDelay:1.0];
    NSLog(@"%@ awakeWithContext", self);
    self.counter = 0;
}

- (void)willActivate {
    // This method is called when watch view controller is about to be visible to user
    NSLog(@"%@ will activate", self);
}

- (void)didDeactivate {
    // This method is called when watch view controller is no longer visible
    NSLog(@"%@ did deactivate", self);
}

#pragma mark - Button actions

- (IBAction)saveCounter {
    //Send count to parent application
    self.counter++;
    NSString *counterString = [NSString stringWithFormat:@"%d", self.counter];
    NSDictionary *applicationData = [[NSDictionary alloc] initWithObjects:@[counterString] forKeys:@[@"counterValue"]];

    //Handle reciever in app delegate of parent app
    [WKInterfaceController openParentApplication:applicationData reply:^(NSDictionary *replyInfo, NSError *error) {
        [self showSaveNotificationLabel];
    }];
}

#pragma mark - Helper methods

-(void)showSaveNotificationLabel {
    NSString *soundFilePath = [[NSBundle mainBundle] pathForResource: @"beep1" ofType: @"mp3"];
    NSURL *fileURL = [[NSURL alloc] initFileURLWithPath: soundFilePath];

    myAudioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:fileURL error:nil];
    myAudioPlayer.volume = 0.1;

    [myAudioPlayer play];
}
-(void)checkCount
{
    NSLog(@"Button tap clicked : %d times", self.counter);
    self.counter = 0;
}