标签: html-table
使用jQuery从Ajax响应构建表行(Json)
可能重复的嵌套元素
我从服务器端ajax响应(Json)得到,我正在尝试动态创建表行并将它们附加到现有表(ID :) #records_table;
我尝试以可能的重复方式实现解决方案,但失败了.
我的回答如下:
"[{
"rank":"9",
"content":"Alon",
"UID":"5"
},
{
"rank":"6",
"content":"Tala",
"UID":"6"
}]"
需求结果是这样的:
<tr>
<td>9</td>
<td>Alon</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Tala</td>
<td>5</td>
</tr>
我想在不解析Json的情况下做一些事情,所以我尝试做以下事情,这当然是一场灾难:
function responseHandler(response)
{
$(function() {
$.each(response, function(i, item) {
$('<tr>').html(
$('td').text(item.rank),
$('td').text(item.content),
$('td').text(item.UID)
).appendTo('#records_table');
});
});
}
从我的解决方案中,我只得到一行,所有单元格中的数字为6.我究竟做错了什么？
推荐指数
解决办法
查看次数
将样式应用于第一行的单元格
它应该很简单,但我无法弄清楚.
我有这样一张桌子:
<table class="category_table">
<tr><td> blabla 1</td><td> blabla 2 </td></tr>
<tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>
我想制作td第一tr行的标签vertical-align.但不是第二排.
.category_table td{
vertical-align:top;
}
推荐指数
解决办法
查看次数
如何将文本旋转90度,并根据html中的文本调整单元格大小
假设我有一些行和列的表,所以我想在单元格中旋转文本,如下所示
:
问题是当我使用样式旋转文本时:
#rotate {
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
这一切都搞砸了
HTML代码:
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td id='rotate'>10kg</td>
<td >B</td>
<td >C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td id='rotate'>20kg</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td id='rotate'>30kg</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
</table>
CSS:
<style type="text/css">
td {
border-collapse:collapse;
border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
visibility: …推荐指数
解决办法
查看次数
如何构建表头而不是跨越HTML中的多行？
我想构建一个表如下:
| Major Heading 1 | Major Heading 2 |
| Minor1 | Minor2 | Minor3 | Minor4 |
----------------------------------------------
| col1 | col2 | col3 | col4 |
rest of table ...
看看TH元素只有一行,如何构造标题行,如列排列？分层表似乎不是一个好的选择,因为列宽不会排列,我也不能使用带有colspan的TH标签的两行.
推荐指数
解决办法
查看次数
了解D3.js如何将数据绑定到节点
我正在阅读D3.js文档,并且发现很难从文档中理解该selection.data方法.
这是文档中给出的示例代码:
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
var tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr");
var td = tr.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.text(function(d) { return d; });
我理解大部分内容,但声明.data(function(d) { return d; })部分的内容是var td什么？
我最好的猜测如下:
- 该
var tr语句已将四元素数组绑定到每个tr节点 - 的
var td语句然后使用该四元件阵列作为其数据,以某种方式
但.data(function(d) { return d; })实际上如何获得这些数据,以及它返回了什么？
推荐指数
解决办法
查看次数
填充表格行
<html>
<head>
<title>Table Row Padding Issue</title>
<style type="text/css">
tr {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<h2>Lorem Ipsum</h2>
<p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse
platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed
tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac …推荐指数
解决办法
查看次数
使用jQuery将行添加到表的tbody
我正在尝试向表中添加行tbody.但我遇到了实现这个问题的问题.首先,从html页面更改下拉列表时调用发生所有事情的功能.我创建了一个tr包含所有td内部的字符串,其中包含html元素,文本和其他内容.但是当我尝试使用以下方法将生成的行添加到表中时:
$(newRowContent).appendTo("#tblEntAttributes tbody");
我遇到了一个错误.表的名称是tblEntAttributes,我正在尝试将其添加到tbody.
实际上正在发生的事情是jQuery无法tblEntAttributes作为一个HTML元素.但是我可以使用它来访问它documemt.getElementById("tblEntAttributes");
有没有什么办法可以通过向tbody表中添加行来实现这一点.也许绕道或其他东西.
这是整个代码:
var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>";
$("#tblEntAttributes tbody").append(newRowContent);
我忘记提到的一件事是编写此代码的函数实际上是ajax调用的成功回调函数.我能够访问该表使用document.getElementById("tblEntAttributes")但由于某种原因$(#tblEntAttributes)似乎不起作用.
推荐指数
解决办法
查看次数
CSS表td宽度 - 固定,不灵活
我有一张桌子,我想在td上设置固定宽度为30px.问题是当td中的文本太长时,td被拉伸超过30px.Overflow:hidden在td上不起作用,我需要某种方法来隐藏溢出的文本并保持td宽度为30px.
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
推荐指数
解决办法
查看次数
在colgroup中使用text-align center
我在我的页面中有一个表,我使用colgroups以相同的方式格式化此列中的所有单元格,适用于背景颜色和所有.但似乎无法弄清楚为什么文本对齐中心不起作用.它没有将文本对齐居中.
例:
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<colgroup id="col19" class="datacol"></colgroup>
<colgroup id="col18" class="datacol"></colgroup>
<thead>
<th> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
推荐指数
解决办法
查看次数
如何使用CSS类在td元素内对齐div
它正在以这种方式工作
<td align="center">
但我想使用CSS类.
我这样定义了类,但没有运气
td
{
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
}
垂直对齐正在工作,文本对齐适用于文本.但它并没有以这种方式将div与div内部对齐.我想在td内对齐div.
推荐指数
解决办法
查看次数
标签 统计
html-table ×10
html ×7
css ×5
jquery ×2
alignment ×1
center ×1
css-tables ×1
d3.js ×1
dynamic ×1
html5 ×1
javascript ×1
json ×1
padding ×1
row ×1
rows ×1