Question

我有一个矩阵，可以正确显示。但是我想添加一个行名来区分每个矩阵行，例如矩阵列。

function setTrait_matrix() {

  var matrixVal = 5;

  if (matrixVal != 0 || matrixVal != null) {
    var root = document.getElementById("traits_matrix_Div");
    var table = document.createElement('table');
    table.className = "diffChromotable";
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);


    var firstList = {};
    for (var x = 1; x <= matrixVal; x++) {
      firstList['Title' + x] = 'Title' + x;
    }
    myData = Object.values(firstList);

    var tr = document.createElement('tr');
    // Header row
    for (var j = 0; j < matrixVal; j++) {
      var th = document.createElement('th'); //column
      var text = document.createTextNode(myData[j]); //cell
      th.appendChild(text);
      tr.appendChild(th);
    }

    tblB.appendChild(tr);

    for (var i = 0; i < matrixVal; i++) {
      var tr = document.createElement('tr');
      tblB.appendChild(tr);
      var td = document.createElement('td');
      var curcolumn = i + 1;

      //alert(curcolumn);
      for (var j = 0; j < matrixVal; j++) {
        var input = document.createElement("input");
        input.type = "text";
        var col = j + 1;
        if (i >= 0 && j >= 0) {
          input.name = "m" + curcolumn + "_m" + col;
          input.value = "";
          input.id = "m" + curcolumn + "_m" + col;
        }
        const td = document.createElement('td');
        td.appendChild(input);
        tr.appendChild(td);
      }
    }
    root.appendChild(table);
  }

}

<body onload="setTrait_matrix()">

  <div id="traits_matrix_Div" style="visibility:visible" style="border: 1px; height:200px; align: center;"></div>

</body>

如代码段所示，我得到：

           Title1 Title 2 Title 3 Title4 Title5
              -       -      -      -      -
              -       -      -      -      -
              -       -      -      -      -
              -       -      -      -      -
              -       -      -      -      -

但是我想拥有：

               Title1 Title 2 Title 3 Title4 Title5
     Title1       -       -      -      -      -
     Title2       -       -      -      -      -
     Title3       -       -      -      -      -
     Title4       -       -      -      -      -
     Title5       -       -      -      -      -

有人可以建议我。预先感谢！

Answer 1

您没有将第一个td附加到tr，而且您可能还希望第一个空白。

var tr = document.createElement('tr');
tr.appendChild(document.createElement('th')); // added
// Header row
for (var j = 0; j < matrixVal; j++) {
  var th = document.createElement('th'); //column
  var text = document.createTextNode(myData[j]); //cell
  th.appendChild(text);
  tr.appendChild(th);
}

tblB.appendChild(tr);

for (var i = 0; i < matrixVal; i++) {
  var tr = document.createElement('tr');
  tblB.appendChild(tr);
  // added
  var td = document.createElement('td');
  var text = document.createTextNode(myData[i]);
  td.appendChild(text);
  tr.appendChild(td);
  // added end

  var curcolumn = i + 1;

  //alert(curcolumn);
  for (var j = 0; j < matrixVal; j++) {

如何在javascript中显示矩阵行头

1 个答案: