标签: html-table

在我的 MVC 视图中，我在表中显示来自我的模型的数据列表，如下所示。当一个字段满足我的 if-else 语句中的某些条件时，如何使指定的行改变颜色？似乎我不能为此在 if-else 中添加 jquery ......

我的看法：

    ...

    <table>

    ...      

    @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.field1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.field2)
                </td>
                <td>
                    @if(item.field3== 0){
                        //change this row to grey color
                }
                else {
                        @Html.DisplayFor(modelItem => item.field3)
                }
                </td>

      ....

     </table>

我已将点击处理程序附加到表格行元素，我需要一些帮助来从点击处理程序中排除带有类子菜单的元素。

我尝试使用 jQuery :not选择器成功排除整个td元素，但这不是我想要的。

JsFiddle 链接

下面的代码需要jQuery、Bootstrap和FontAwesome才能工作。请参考上面的 JsFiddle 链接。

HTML

<table class="table">
  <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Details</th>
        <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>123</td>
        <td>Name 1
            <div class="pull-right sub-menu">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-chevron-down"></i>

                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li><a href="#">Edit</a></li>
                        <li><a href="#">Delete</a></li>
                        <li><a href="#">Block</a></li>
                    </ul>
                </div>
            </div>
        </td>
        <td>New User</td>
        <td>Pending</td>
    </tr>
  </tbody>
</table>

Javascript

$(function() {
  $('table tr').on('click', function() {
    alert('Clicked');
  }); …

我在多行表标题上设置列宽度时遇到问题。下面是示例的表标记。

table{
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
th,td{
	border: 1px solid #e3e3e3;
	padding: 5px 10px;
	word-break: break-word;
}
thead{
	background: white;
}	

<table class="table--fixed-header">

	<thead>
		<tr>
			<th rowspan=2>Name</th>
			<th colspan=3>Address</th>
			<th rowspan=2>Email</th>
			<th rowspan=2 style="width:50px">Birthday</th>
			<th rowspan=2>Phone</th>
		</tr>
		<tr>
			<th>Street</th>
			<th>City</th>
			<th style="width:100px">Postal</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Lucius Cotton</td>
			<td>Ap #796-9909 Vulputate St.</td>
			<td>Hope</td>
			<td>4169</td>
			<td><a href="ac@ullamcorper.org">ac@ullamcorper.org</a></td>
			<td>Jan 1, 2016</td>
			<td>(983) 441-5305</td>
		</tr>
		<tr>
			<td>Richard Lloyd</td>
			<td>792-9848 Ante Rd.</td>
			<td>Fermont</td>
			<td>7683</td>
			<td>eget.metus@dolordapibusgravida.com</td>
			<td>May 2, 2016</td>
			<td>(527) 632-2952</td>
		</tr> …

我正在尝试在 php 表中显示 json 内容，但每次都出现错误。我有一些语法错误，无法弄清楚应该更改什么？

附注。尝试使用 Slim 框架构建它

这是我的代码：

<div class="data-table-wrapper">
<?php
    $myData = file_get_contents("http://ergast.com/api/f1/current.json");
    $myObject = json_decode($myData);
?>
    <table class="data-table">
        <thead>
            <tr>
                <td>Date</td>
                <td>Time</td>
                <td>Round</td>
                <td>Circuit</td>
                <td>Location</td>
            </tr>
        </thead>
        <?PHP
        foreach($myObject as $key=>$item);
        ?>
        <tr>
            <td><?PHP echo $item->Date; ?></td>
            <td><?PHP echo $item->Time; ?></td>
            <td><?PHP echo $item->Round; ?></td>
            <td><?PHP echo $item->Circuit; ?></td>
            <td><?PHP echo $item->Location; ?></td>
        </tr>
        <?PHP
            }
        ?>
    </table>
</div>

我的错误是：

注意：未定义的属性：stdClass::$Date in C:\xampp\htdocs\challenge\app\view\challenge.php 第 38 行

注意：未定义的属性：stdClass::$Time in C:\xampp\htdocs\challenge\app\view\challenge.php 第 39 行

注意：未定义的属性：stdClass::$Round in C:\xampp\htdocs\challenge\app\view\challenge.php 第 40 …

我想将我的 html 表导出到 CSV 文件。有没有简单的代码？用户将使用两个或三个步骤并下载 CSV。

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tr>
    <td rowspan='2'>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tfoot>
    <tr>
      <th colspan='2'>6 <span style='display:none'> 7 
</span> 8</th>
    </tr>
  </tfoot>
</table>

我正在生成接近联系人列表的内容。我希望我的联系人根据他们的位置彼此相邻列出。

例子：

联系人

位置 0 | 位置 1

位置 2 | 位置 3

我设法将结果放入表格中，但由于某种原因，它们以这种方式加载Screenshot，其中 test1 是位置 0 的项目，我希望 Test Test 在左列中，而 Test2 Test2 在右列中。

我的代码：

<?php
$connection = connectToSql();
$query = "SELECT * FROM visitorsystem.employee";
$result = mysqli_query($connection,$query)
          or die("Error in query: ". mysqli_error($connection));
?>
<form action="#" method="POST"> 
    <table class="table" style = "margin-top:50px">
        <?php 
        $i=0;
        while ($row = mysqli_fetch_assoc($result)){ 
            echo "$i";
            if($i % 2 == 0  &&  $row != count($result)){ 
                ?>
                <tr>
                    <td>
                        <button type="button" class="btn btn-link"  style="width:100%;"> …

我正在尝试动态填充表格，但无法弄清楚为什么这不起作用！

在这里，我得到了我的 json，我将对象数组保存在 customerArray 中。

export class AllCustomersComponent implements OnInit {
customerArray: any;


    constructor(private http : HttpClient ) {}

    ngOnInit() {
         this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
        .subscribe((data) => {
           this.customerArray = data;
          console.log(customerArray);
      }
    }
}

在这里，我试图用上述数组填充表格。

<table class="table">
        <thead>
          <tr>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>46</td>
            <td><i class="fas fa-edit"></i></td>
            <td><i class="fas fa-trash-alt"></i></td>
          </tr>
          <tr>
            <td *ngFor="let customer of customerArray">{{customer}}</td>
          </tr>
        </tbody>
      </table>

但我的表只是呈现这个：

[object Object] [object Object] [object Object] [object Object] [object …

我正在尝试设置一个简单的 HTML 表格的样式，以在每行和每行的圆角之间留出空间，如下所示：

这是我目前拥有的：

我是前端开发的新手，所以我只想使用 CSS 和 HTML 来掌握一些东西。到目前为止，我一直无法在每一行上获得圆角。我试图加入border-radius到table并tr没有成功的元素。将属性添加到td元素以某种方式起作用，但当然我在每个项目上得到圆边，而不是每一行。

我还需要在文本周围的每一行内添加填充，这也还没有完全奏效，但圆角边缘是我目前更关心的问题。

这是我的代码。注意我使用的是 Jinja 模板引擎，这是数据到达那里的方式。

HTML：

<head>
 <! HEADER CODE/>
  <link rel="stylesheet" href="static/css/results.css">


</head>

<body>
  <main>

    <h1> Stores In Your Area</h1>
    <table class="results">

      {% for row in table %}

        <tr class="spaceunder">
            {% for item in row[:-1] %}
            <td>
                {{ item }}
            </td>
            {% endfor %}

            <td>
                {{ row[-1] }} mi.
            </td>
        </tr>

      {% endfor %}

    </table>

  </main>

</body>
</html>

CSS：

body {
    background-color: #FFCBAA; …

我有两个要并排显示的表格。当第一个表格的宽度很大（但仍然小到可以并排放置）时，第二个表格显示在其下方。

有没有办法并排显示它们，并且只有在屏幕宽度太小时才下拉？

这是我的代码：

<div class="container">
<div class="row">
    <div class="col-sm">
    <h3>Students</h3>
    <div class="row">
        <a href="/newstudent" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
        </tr>


        <tr>
            <td><a href="/editstudent/lilyliam">lilyliam</a></td>
            <td>Lily</td>
            <td>Liam</td>
        </tr>

        <tr>
            <td><a href="/editstudent/gracenoah">gracenoah</a></td>
            <td>Grace</td>
            <td>Noah</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>William</td>
        </tr>

        <tr>
            <td><a href="/editstudent/avawilliam">avawilliam</a></td>
            <td>Ava</td>
            <td>Williamsssssssssssssssssss</td>
        </tr>

    </table>
    </div>
    <div class="col-sm">
    <h3>Teachers</h3>
    <div class="row">
        <a href="/newteacher" class="button-sm">New</a>
    </div>
    <table>
        <tr>
            <td>Username</td>
            <td>First name</td>
            <td>Surname</td>
            <td>Type</td>
        </tr>

        <tr>
            <td><a href="/editteacher/johnsmith">johnsmith</a></td>
            <td>John</td>
            <td>Smith</td>
            <td>ADMIN</td>
        </tr>

        <tr>
            <td><a href="/editteacher/williamjoseph">williamjoseph</a></td>
            <td>William</td>
            <td>Joseph</td>
            <td>teacher</td>
        </tr> …

在当前的项目中，我有一个三栏表格。

<table>
    <tr>
        <th>Datum</th>
        <th>Entschuldigt?</th>
        <th>Vermerkt von</th>
    </tr>
</table>

我当前的表格样式表如下所示：

th {
    border-bottom: 1px solid black;
}

td + td {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

现在桌子看起来像这样

现在我想删除那些小空格，以便列分隔符和标题分隔符是实心的，而不是那种虚线。非常感谢每一个帮助