Javascript 如何选择div表的第一列？
我试图在div表中设置第一列和第一行粗体。 我设法把第一排加粗。但我不能让第一栏看起来粗体Javascript 如何选择div表的第一列？,javascript,jquery,html,css,handsontable,Javascript,Jquery,Html,Css,Handsontable,我试图在div表中设置第一列和第一行粗体。 我设法把第一排加粗。但我不能让第一栏看起来粗体 <style type="text/css"> body {background: white; margin: 20px;} h2 {margin: 20px 0;} .zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
正文{背景：白色；边距：20px；}
h2{边距：20px 0；}
.zebraStyle>tbody>tr:n个孩子（2n+1）>td{background:#e0e0d1；}
.firstRowStyle>tbody>tr:n子级（1）>td{font-weight:Bold；}
.firstColumnStyle>tbody>tr:eq（1）{font-weight:Bold；}
var arr=[，“2012”，“2013”，“2014（年初至今）”，[“法拉利”，14600890888.3900001，16372430070.99283566771.55000001]，“阿尔法罗密欧”，1199141138.1900001，1224624821.1500001，192307335.4900001]；
$（文档）.ready（函数（）{
$（“#myTable”）。可手持({
数据：arr，
会议记录：1，
上下文菜单：正确，
只读：对，
固定柱长度：1
});
$（'#myTable'）。查找（'table'）。添加类（'zebraStyle'）；
$（'#myTable'）。查找（'table'）。添加类（'firstRowStyle'）；
$（'#myTable'）。查找（'table'）。添加类（'firstColumnStyle'）；
});
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
#myTable tr td:first-child{
font-weight:bold;
}
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
#myTable tr td:first-child{
font-weight:bold;
}
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
$("#myTable").find("td:first-child").css("font-weight", "bold");
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
.firstColumnStyle {font-weight: Bold;}
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
$("#myTable").find("td:first-child").addClass("firstColumnStyle");
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
$("#myTable").find("td:first-child").css("font-weight", "bold");
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
.firstColumnStyle {font-weight: Bold;}
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>
$("#myTable").find("td:first-child").addClass("firstColumnStyle");
注意：在IE7:first child伪选择器中仅使用CSS对动态元素不起作用 我认为这个问题没有任何理由投反对票。如果人们能善意地解释原因，那就太好了。我看不出这个问题有任何理由投反对票。如果人们能友好地解释原因，那就太好了
<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
.zebraStyle > tbody > tr:nth-child(2n+1) > td {background: #e0e0d1;}
.firstRowStyle > tbody > tr:nth-child(1) > td {font-weight: Bold;}
.firstColumnStyle > tbody > tr:eq(1) {font-weight: Bold;}
</style>
<script type='text/javascript'>
var arr= [["", "2012", "2013", "2014(YTD)"],["Ferrari", 1460089088.3900001, 1637243070.99, 283566771.55000001],["Alfa Romeo", 1199141138.1900001, 1224624821.1500001, 192307335.49000001]];
$(document).ready( function(){
$('#myTable').handsontable({
data: arr,
minSpareRows: 1,
contextMenu: true,
readOnly: true,
fixedColumnsLeft: 1
});
$('#myTable').find('table').addClass('zebraStyle');
$('#myTable').find('table').addClass('firstRowStyle');
$('#myTable').find('table').addClass('firstColumnStyle');
});
</script>
</head>
<body>
<div id="myTable" class="handsontable" style="width: 400px; margin-left:auto; margin-right:auto; background-color:silver"></div>
</body>