标签: html-table

假设我有两个数组形式的状态属性，如下所示：

constructor(props) {
    super(props);
    this.state = {
            fullNames: [],
            salaryInfo: []
        }}

...等等（我收到 props 的许多其他代码，发出 ajax 请求）

我想要完成的是循环遍历我的状态中的这两个数组并将它们显示在一个table中。

例如，很容易做这样的事情：

const employeesFormated = fullNames
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

const salariesFormated = salaryInfo
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

...然后将其显示在 JSX 表体中：

                   <table>
                       <thead>
                        <tr>
                            <th>Employee name</th>                        
                        </tr>
                        </thead>
                        <tbody>
                            {employeesFormated}
                        </tbody>
                    </table>

...对于工资数组/表也可以做同样的事情。通过一些额外的 CSS 技巧，也许可以将两个不同的表放置在正确的位置，但我想知道是否可以映射这两个表并将它们呈现在具有相应数据的单个表中，这意味着 =>

员工A === 工资A

我从数据库获取数据并通过 php echo 将其显示在 HTML 上。现在我需要在带有 id 的特定 tr 上放置一个点击功能breakrow，但是这个点击功能不起作用。我正在使用.on文档中建议的函数来动态添加内容。另外，我在控制台中也没有看到任何错误。这是示例代码。（当我将相同的代码直接添加到 html 页面中时，它按预期工作）

PHP部分：

echo '<div class="container" id="container">
        <table class="gridtable" id="tableMain">
            <thead>
                <tr class="tableheader">
                  <th>customer</th>
                  <th>product</th>
                  <th>thedate</th>
                  <th>value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>

                <tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>


                <tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
                <tr …

我想在 blazor razor 组件中制作一个完全没有可见边框的表格。我仅用它来订购元素。

例如，带有“border=”0“”的表如下所示（取自 Visual Studio 中 Blazor 模板启动的 Wetaher 服务）：

我想删除行之间以及表头和正文之间的线。我尝试过“border =”0“cellpadding =”0“cellspacing =”0“”但它没有任何作用。

我按照这个例子来实现角度材料表。

https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts

在这里，我使用下面的 CSS 代码更改了标题颜色。

.mat-header-cell {
    background: red;
}

我想从组件传递标题颜色而不是静态 CSS 方式。有没有办法动态改变标题颜色？

我试图让我的表数据在悬停在表行上时改变颜色。那可能吗？我尝试到处搜索，但似乎没有一个符合我的描述。

我只想当我将鼠标悬停在表格行上时更改“Hello World”的颜色。因此，当我将鼠标悬停在表行中的任何位置时，只有表数据“Hello World”会改变颜色。

table tr:hover {
  color: white
}

<table>
  <tbody>
    <tr>
      <td> Hello World </td>
      <td> Greetings </td>
    </tr>
  </tbody>
</table>

我有一个类似表格的结构，其中每个单元格都接受一些输入。html 标签的 id 类似于id="code[0].name"、id="code[0].age"、...等。类似地，id="code[1].name"、id="code[1].age"、...、 等等

现在，在 cypress 中，我想执行这样的操作，

namesToFetch.forEach( (el,k) => {
   cy.get('[id=code[k].name]').type(name)

我的问题是，如何使用 中的第 k 个索引cy.get()？

我想在 Cypress 中检查名称文档列的所有行中的内容是否相同。比方说

该表没有固定的行数。

附加问题：如何检查最新的（发布日期列）是否位于顶部？

鉴于这样的事情：

<table>
 <tr id="row">
  <td>......</td>
  <td>......</td>
  <td>......</td>
 </tr>
 <tr id="row">
  ...

tds 没有 id 或其他标识符。

例如，我怎样才能找到第三个？

我可以找到<td>这样的任何标签：

cy.get("td")

我似乎能够得到这样的特定行：

cy.get("#row")[0]

但这不起作用：

cy.get("#row")[0].cy.get("td")

我想要做的是能够获取例如<td>每行第三个的内容。

为什么这段代码:

row.append($("<td></td>").text("someText"));

...不起作用,我该如何解决？

< table border="1" cellpadding="0" cellspacing="0" width="100%">  
    < tr>
        < td>1< /td>  
        < td>1< /td>
        < td>1< /td>
        < td>1< /td>
        < td>1< /td>
    </tr>
    < tr style="display:block ">
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
        < td>2< /td>
    </ tr>
    < tr style="visibility:hidden ">
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
        < td>3< /td>
    < /tr>
    < tr style="visibility:hidden ">
        < td>4< /td>
        < td>4< /td>
        < td>4< /td>
        < …