javascript - Making table cells same row and make it look like buttons

I have this code below that alerts the value of the cell whenever the user clicks on the row. The problem is that i want try to make the cells look like button and put them on the same roll i'm not really too sure if this is possible to acplish. Any help would be greatly appreciated thanks!

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);
}

		.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;
		}

<!DOCTYPE html>
<script src=".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>

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);
}

		.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;
		}

<!DOCTYPE html>
<script src="https://ajax.googleapis./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>

This is what im trying to acplish.

Share Improve this question edited Jun 14, 2018 at 7:48 asked Jun 14, 2018 at 7:25 Best Jeanist 1,1294 gold badges14 silver badges37 bronze badges

You must do it in table or not?? – לבני מלכה Commented Jun 14, 2018 at 7:28
1 Do you have to use table element? Are you allowed to use flexbox? – David Liang Commented Jun 14, 2018 at 7:28
@DavidLiang As long as the function stays the same its alright – Best Jeanist Commented Jun 14, 2018 at 7:30
@Bobby: See my post below! – David Liang Commented Jun 14, 2018 at 19:17

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

use blow code

  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;
    }

here is working example https://jsfiddle/deepakvaishnav/gfr36c1d/9/

I have changed some script and CSS to achieve your desired output but here you can't get an exact look like given image due to table

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);
}

.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;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis./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>

use below 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>

Here is the approach using flex-box instead of table.

HTML

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

JavaScript with jQuery

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;
}

Result

Here is the working example: https://jsfiddle/xpvt214o/233802/

Now reading from one of the ments, if the user of OP wants only 5 cars in a row, you can easily add a style to the button:

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

But I would highly not remend to put a fixed width on the button element. That defeats the purpose of using flex-box - the flexibility and responsiveness it gives.

Instead, you can setup media breakpoints and do what works fine at that breakpoint (mobile-first approach). For example:

At extra small devices (portrait phones, less than 576px), I want the buttons to be vertically aligned. I can change the initial css flex-flow property to column instead of row.

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

Then on small devices (landscape phones, 576px and up), I might want only 2 items per row.

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

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

On Medium devices (tablets, 768px and up), I might want only 3 items per row.

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

You got the idea. You just need to change the divisor for the numbers of items you want per row.

Here is the working example with breakpoints: https://jsfiddle/rnvt689w/13/

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745565468a4633365.html

javascript - Making table cells same row and make it look like buttons - Stack Overflow

4 Answers 4

HTML

JavaScript with jQuery

CSS

Result

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Making table cells same row and make it look like buttons - Stack Overflow

4 Answers 4

HTML

JavaScript with jQuery

CSS

Result

相关推荐