代码之家 › 专栏 › 技术社区 › Mona Coder

将自定义td添加到二维数组生成的表中面临的问题

jquery javascript

Mona Coder · 技术社区 · 7 年前

请你看一下这个演示,告诉我为什么不能附加全部内容,好吗? <td> 在一排?我要做的是附加一个自定义 <TD & GT; 以一种看起来像

<tr>
    <td>Defult TD</td>
    <td>52</td>
    <td>16</td>
    <td>140</td>
<tr>            

<tr>
    <td>Defult TD</td>
    <td>54</td>
    <td>16</td>
    <td>145</td>
<tr>

但我得到的是

<tr>
    <td>Defult TD</td>
</tr>
<tr>
    <td>52</td>
    <td>16</td>
    <td>140</td>
<tr>            
<tr>
    <td>Defult TD</td>
</tr>
<tr>
    <td>54</td>
    <td>16</td>
    <td>145</td>
<tr>

var sizes= [
   [52, 16, 140],
   [54, 16, 145]
];
var table = $('#size-rows');
var row, cell;
for (var i = 0; i < sizes.length; i++) {
   row = $('<tr />');
   table.append(row);
   cell = $('<td>Default TD</td>')
   for (var j = 0; j < sizes[i].length; j++) {
      cell.append('<td>' + sizes[i][j] + '</td>');
      row.append(cell);
   }
}

td{
border:1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
			
	<table>
		<tbody id="size-rows">	</tbody>
	</table>

2 回复 | 直到 7 年前

DjaouadNM 7 年前

你附加在 <td> ,而是附加 cell 下一个呢 <TD & GT; 致 row :

var sizes = [
  [52, 16, 140],
  [54, 16, 145]
];
var table = $('#size-rows');
var row, cell;
for (var i = 0; i < sizes.length; i++) {
  row = $('<tr />');
  table.append(row);
  cell = $('<td>Default TD</td>');
  row.append(cell);
  for (var j = 0; j < sizes[i].length; j++) {
    row.append('<td>' + sizes[i][j] + '</td>');
  }
}

td {
  border: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody id="size-rows"> </tbody>
</table>

Bryan Dellinger 7 年前

这里有一个使用map函数的解决方案。

var sizes= [
   [52, 16, 140],
   [54, 16, 145]
];

$('#size-rows').append(
  sizes.map(
    x => `<tr>
            <td>Default TD</td>${x.map(y => `<td>${y}</td>`)}
          </tr>`
          )
 );

td{
border:1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
			
	<table>
		<tbody id="size-rows">	</tbody>
	</table>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前