Question

我在下面有这个代码，只要用户点击该行就会提醒单元格的值。问题是我想尝试让细胞看起来像按钮并将它们放在同一卷上我不太确定是否可以实现。非常感谢任何帮助，谢谢！

＆＃13;

var obj2 = {};

var key3 = "Cars";
obj2[key3] = ['Toyota', 'Audi', 'Mercedes', 'Ferrari', 'Jeep', 'Honda', 'Nissan', 'Lamborghini'];
var myArray3 = [];
myArray3.push(obj2);

var bodyString = '';
var headString = '';
$.each(obj2[key3], function(index) {
  bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
});
headString += ('<tr><th>' + 'Cars' + '</th></tr>');
$('.carsclass tbody').html(bodyString);
$('.carsclass thead').html(headString);


$(document).ready(function() {
  $("#carsid td").click(function() {
    getval(this);
  });
});

function getval(cel) {
  alert(cel.innerHTML);
}

＆＃13;

		.class { 
		font-family: Open Sans; 
		}
		.center{
		display:flex;
		justify-content:center
		}
		.skillsTable th{
		border-left: 1px solid #AAA5A4;
		border-right: 1px solid #AAA5A4;
		}
		table{
		float: left;
		border-collapse: collapse;
		width:70%
		}
		td {
		border-left: 1px solid #AAA5A4;
		border-right: 1px solid #AAA5A4;
		padding-top: 8px;
		padding-left: 11px;
		font-size: 15px;
		}
		th {
		font-weight: normal;
		border-bottom: 1px solid #AAA5A4;
		padding-bottom: 5px;
		}
		div{
		margin-bottom:50px;
		}

＆＃13;

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="center">
    <table id="carsid" class="carsclass skillsTable class">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>

</body>

</html>

＆＃13;

这就是我想要完成的事情。

Answer 1

我已经更改了一些脚本和CSS来实现您想要的输出，但是由于表格的原因，您无法获得与图像相同的精确外观

＆＃13;

var obj2 = {};

var key3 = "Cars";
obj2[key3] = ['Toyota', 'Audi', 'Mercedes', 'Ferrari', 'Jeep', 'Honda', 'Nissan', 'Lamborghini'];
var myArray3 = [];
myArray3.push(obj2);

var bodyString = '<tr>';
var headString = '';
$.each(obj2[key3], function(index) {
  bodyString += ('<td>' + obj2[key3][index] + '</td>');
});
bodyString += '</tr>';
headString += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Cars' + '</th></tr>');
$('.carsclass tbody').html(bodyString);
$('.carsclass thead').html(headString);


$(document).ready(function() {
  $("#carsid td").click(function() {
    getval(this);
  });
});

function getval(cel) {
  alert(cel.innerHTML);
}

＆＃13;

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center
}


table {
  float: left;
  border-collapse: collapse;
  width: 70%
}

td {
  border: 0;
  padding: 8px 10px;
  padding-left: 11px;
  font-size: 15px;
  border-radius: 50px;
  background-color: #007bff;
}

th {
  font-weight: normal;
  border: 0;
  padding: 10px 0;
}

div {
  margin-bottom: 50px;
}

＆＃13;

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="center">
    <table id="carsid" class="carsclass skillsTable class">
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>

</body>

</html>

＆＃13;

Answer 2

使用吹码

  td {
      border-width: 1px;
      border-radius: 50px;
      border-color:black;  
      padding: 10px;
      cursor:pointer;
      font-size: 15px;
      background-color: #9fc5e8;
    }

    th {
      font-weight: normal;
      border: 0;
      padding: 10px 0;
    }

    div {
      margin-bottom: 50px;
    }

这是工作示例https://jsfiddle.net/deepakvaishnav/gfr36c1d/9/

Answer 3

以下是使用flex-box代替table的方法。

HTML

<div id="cars-container"></div>

使用jQuery的JavaScript

let cars = [
    'Toyota',
    'Audi',
    'Mercedes',
    'Ferrari',
    'Jeep',
    'Honda',
    'Nissan',
    'Lamborghini',
    'Hyundai'
];

let $carsContainer = $('#cars-container');

// Empty the container first
$carsContainer.html('');

// Loop through the car collection
$.each(cars, function(index, car) {
    let $button = $('<button />', {
        text: car,
        value: car,
        click: function() {
            alert(this.value);
        }
    });
    $carsContainer.append($button);
});

CSS

#cars-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#cars-container button {
    padding: .375rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid #aaa5a4;
    background-color: #9fc5e8;
    margin: .25rem;
}

#cars-container button:hover {
    cursor: pointer;
    background-color: #8ab9e3;
}

结果

以下是工作示例：https://jsfiddle.net/xpvt214o/233802/

现在阅读其中一条评论，如果OP的用户连续只需要5辆汽车，您可以轻松地将样式添加到button：

#cars-container button {
    ...
    width: calc(100% / 5 - 2 * .25rem); <!-- Percentage - margin left - margin right -->
}

但我强烈不建议在button元素上放置固定宽度。这违背了使用flex-box的目的 - 它给出的灵活性和响应性。

相反，您可以设置媒体断点并在该断点处执行正常工作（移动优先方法）。例如：

在超小型设备（人像电话，小于576像素），我希望按钮垂直对齐。我可以将初始的css flex-flow属性更改为column而不是row。

#cars-container {
    ...
    flex-flow: column nowrap;
    ...
}

然后在小型设备（风景手机，576px及以上）上，我可能只想要每行2个项目。

@media (min-width: 576px) {
    #cars-container {
        flex-flow: row wrap;
    }

    #cars-container button {
       width: calc(100% / 2 - 2 * .25rem);
    }
}

在中型设备（平板电脑，768像素及以上）上，我可能只想要每行3件。

@media (min-width: 768px) {
    #cars-container {
        width: calc(100% / 3 - 2 * .25rem);
    }
}

你明白了。您只需要为每行所需的项目数更改除数。

以下是断点的工作示例：https://jsfiddle.net/rnvt689w/13/

Answer 4

使用下面的css。

<style>
#carsid {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#carsid td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: pointer;
}

#carsid tr:nth-child(even){background-color: #f2f2f2;}

#carsid tr:hover {background-color: #ddd;}

#carsid th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>

将表格单元格设为相同的行，使其看起来像按钮

4 个答案:

HTML

使用jQuery的JavaScript

CSS

结果