0 
     <body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

次の JavaScript コードを使用して、ID「table_x」を持つテーブルの最初の行の 2 番目の「ボックス」を選択します。

        var matrix = document.querySelector("#table_x");
        var row;
        var box;

        function select(x,y){
            row = matrix.childNodes[x];
            box = row.childNodes[y];
            return box;
        }

        var test = select(0,1);

ただし、(コマンド console.log(test); を使用して) コンソールに要素を出力したい場合、「未定義」が返されます。html 要素の選択の何が問題になっていますか?

4

4 に答える 4

5

x行を取得しようとしていて、そこからセルを取得しようとしていると仮定しますy。（y行とxセルに使用したかったのですが、コードは反対のことをしているようです。）

childNodesその場合、要素だけでなく、コメント ノード、テキスト ノードなども含まれるため、使用したくありません。

それとは別に、それが要素ではなく要素をmatrix参照していることを確認する必要があります..tbodytable

次に、これらのいずれかを使用できます。matrixそれらの1つは変数さえ必要としないことに注意してください：

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

3 つすべての例:

var matrix = document.querySelector("#table_x tbody");

function select1(x, y) {
  return matrix.children[x].children[y];
}

function select2(x, y) {
  return matrix.rows[x].cells[y];
}

function select3(x, y) {
  var selector = "#table_x tr:nth-child(" + (x + 1) + ") > td:nth-child(" + (y + 1) + ")";
  return document.querySelector(selector);
}

select1(0, 0).style.color = "blue";
select2(1, 1).style.color = "green";
select3(2, 2).style.color = "red";
<table id="table_x">
  <tbody>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

于 2016-11-18T19:07:47.583 に答える
2

HTML テーブルで何かを選択している間、テーブルの特別なプロパティと各行rowsの同様のプロパティを利用できます。cells

これがあなたの関数の更新版です（idパラメータを追加しました）：

   function select(x, y, id) {
     var matrix = document.getElementById(id)
     var row = matrix.rows[x];
     var box = row.cells[y];
     return box;
   }

   var test = select(0, 1, 'table_x').style.color = 'red';
<table id="table_x">
  <tbody>
    <tr>
      <td></td>
      <td>this box should be selected</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

于 2016-11-18T19:07:42.803 に答える
1

childNodesuserowsおよびcellsspecific for tableを使用する代わりに。rowまた、変数とbox変数を戻り値にマージして、関数を小さく/高速にすることもできます。

var matrix = document.getElementById("table_x");

function select(x,y){
  return matrix.rows[x].cells[y];
}

var test = select(0,1);
console.log(test);
<body>
    <table id="table_x">
        <tbody>
            <tr>
                <td></td>                         
                <td>this box should be selected</td>
                <td></td>
                <td></td>
           </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
  </body>

于 2016-11-18T19:09:58.473 に答える
1

DOM 要素には、要素ノードとテキスト ノードの両方を含めることができます。

の最初の子ノードtable_xは空白テキスト ノードであり、TBODY 要素ではありません。

テキスト ノードをスキップして要素ノードのみを操作するには、children代わりに を使用しchildNodesます。

function select(x, y) {
  row = matrix.children[x];
  box = row.children[y];
  return box;
}
于 2016-11-18T19:07:30.527 に答える