javascript - 要素の最初の行のみにマージンを追加する方法

Question

頭だけで td タグにマージンを追加しようとしています。テーブル全体に「tableizer-table」というクラスがあります。最初の tr (thead で唯一の tr) には、クラス "tableizer-firstrow" があります。次のすべてを試し、さまざまなもので遊んでみましたが、何もうまくいかないようです。

var eo_cats = {
  para1: ["Item #"],
  para2: ["Type"],
  para3: ["Operating Temp"],
  para4: ['Dia'],
  para5: ['Length'],
  para6: ["Material"],
  para7: ["Junction"],
  para8: ["Price"],
  para9: ["order"]
};

var partnumpref = [
  ["NB4-CAXL-14U-12-"],
  ["A", "B", "C"], //dia
  ["A", "B", "C"], //len
  ["G", "U", "E"], //junction type
]


var paras1 = [
  ["K"],
  ["-270°C to 1372°C, –454°F to 2501°F"],
  ['1/8"', '3/16"', '1/4"'],
  ['6"', '12"', '18"'],
  ["316SS"],
  ["Grounded", "Ungrounded", "Exposed"],
  ["$51.00"],
  ["order"]
];

//for (q = 0; q < paras1.length; q++) {
//  console.log(paras1[q]);
//}

function arrayRecursion(paras) {
  if (paras.length == 1) {
 //   console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + "@" + allValues[i]);
    }
  }
  return results;
  
}

//console.log(arrayRecursion(paras1));

function arrayRecursion2(paras) {
  if (paras.length == 1) {
//    console.log(paras[0])
    return paras[0];
  }
  var results = [];
  var allValues = arrayRecursion2(paras.slice(1));
  for (var i = 0; i < allValues.length; i++) {
    for (var j = 0; j < paras[0].length; j++) {
      results.push(paras[0][j] + allValues[i]);
    }
  }
  return results;
}

var eopartnum = arrayRecursion2(partnumpref);

function generate_table(paras) {

var sep = [];
var res = [];
var singarrres = arrayRecursion(paras);
for (k = 0; k < singarrres.length; k++) {
  var str = singarrres[k];
  var res = str.split("@");
  sep.push(res);
}
//console.log(sep);


  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];

  // creates a <table> <thead> <tbody> elements
  var tbl = document.createElement("table");
  var tblHead = document.createElement("thead");
  var tblBody = document.createElement("tbody");
  tblBody.className = "tableizer-table"

  // creating all cells
  for (var i = 0; i < sep.length; i++) {
    // creates a table row
    var row = document.createElement("tr");
    var firstcell = document.createElement("td");
    var firstcellText = document.createTextNode(eopartnum[i]);
    firstcell.appendChild(firstcellText);
    row.appendChild(firstcell);

    for (j = 0; j < sep[i].length; j++) {
      var cell = document.createElement("td");
      var cellText = document.createTextNode(sep[i][j]);

      //    if(paras[j].length==1) {
      //      var cellText =
      //      document.createTextNode(paras[j][0]);
      //    } else {
      //      var cellText = document.createTextNode("too many options");
      //    }
      //    for (var k = 0; k < paras[j].length; k++) {
      //      var cellText = document.createTextNode(paras[k][0]);
      cell.appendChild(cellText);
      row.appendChild(cell);
      tblBody.appendChild(row);
      //      console.log(k + ': Element ' + i + ': Value ' + paras[k][i]);
      //    }
    }
  }

  // add the row to the end of the table body


  var eo_hrow = document.createElement("tr");
  eo_hrow.className = "tableizer-firstrow";
  var eo_head_row = tblHead.appendChild(eo_hrow);
  //  eo_head_row.className = "tableizer-firstrow"
  for (var k in eo_cats) {
    for (var i = 0; i < eo_cats[k].length; i++) {
      var headCell = document.createElement("td");
      var headText = document.createTextNode(eo_cats[k][0]);
      headCell.appendChild(headText);
      eo_head_row.appendChild(headCell);
//      console.log(k + ': Element ' + i + ': Value ' + eo_cats[k][i]);
    }
  }
//  console.log(tbl);
//  console.log(headCell);
//  console.log(eo_head_row);
  tbl.appendChild(tblHead);
  document.getElementsByTagName("table").className = "tableizer-table";
  tbl.appendChild(tblBody);
  body.appendChild(tbl);

}



document.getElementById("tgen").innerHTML = generate_table(paras1);

//var rows = document.getElementsByTagName('tr');
//for (var i = 1; i < rows.length; i++) {
//  var cells = rows[i].getElementsByTagName('td');
// console.log(cells[3]);
// console.log("i is " + i);
// console.log(i);
//  if (i > 9) {
// console.log("i in if is " + i)
// console.log(cells[3]);
//    cells[3].innerHTML = '1/8"';
//  }
//  console.log(i);
//}

.eo_product_listing_table {}

.tableizer-table tr:nth-child(even) {
  background-color: #eee;
}

.tableizer-table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}

.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 2px solid #CCC;
  text-align: left;
  color: black;
}

.tableizer-table thead {
  font-weight: bold;
  text-align: left;
}

.tableizer-firstrow {
  background-color: white;
  border-collapse: separate;
  border-spacing: 5px;
  margin: 4px;
}

.tableizer-firstrow td {
  background-color: #104E8B;
  color: white !important;
  padding: 4px;
  margin: 4px;
}

<div id="tgen"><body>

</body></div>

私は主に最初の行のスタイルだけに関心があります。ここで、使用を推奨する他のソリューションを見てきました

  border-collapse: separate;
  border-spacing: 4px 4px;

しかし、それは私にとってもうまくいきません。ここにフィドルがあります。http://jsfiddle.net/98oL12tk/12/

非常に長く、表は JavaScript の関数とループを使用して生成されますが、Chrome コンソール/エディター/デバッガーを使用すると、HTML 要素を確認するのに役立ちます。

javascript - 要素の最初の行のみにマージンを追加する方法

2 に答える 2

Related

Reference