:nth-child(数字)の数字に変数を使って コードを短くしたいです。

Question

前提・実現したいこと

:nth-child(数字)の数字に変数を使って
コードを短くしたいです。

for分の部分も変数を使えれば、もっと短くなるはずです。

該当のソースコード

// 空欄の１列目のセルを返す
    var blankcell1_1 = function blankcell1_1(){
        var tds=[...document.querySelectorAll('table tr td:nth-child(1)')]
        var idx=tds.map(x=>x.textContent).indexOf("");
        console.log(idx<0?null:tds[idx]);
        return tds[idx]

    }
    console.log(blankcell1_1())

    // 空欄の2列目のセルを返す
    var blankcell2_1 = function blankcell2_1(){
        var tds=[...document.querySelectorAll('table tr td:nth-child(2)')]
        var idx=tds.map(x=>x.textContent).indexOf("");
        console.log(idx<0?null:tds[idx]);
        return tds[idx]
    }


    // 空欄の3列目のセルを返す
    var blankcell3_1 = function blankcell3_1(){
        var tds=[...document.querySelectorAll('table tr td:nth-child(3)')]
        var idx=tds.map(x=>x.textContent).indexOf("");
        console.log(idx<0?null:tds[idx]);
        return tds[idx]
    }

for ( a of 配列１) {
    // Aグループを三列目まで埋める
    blankcell1_1().innerText = 配列１[0]
    配列１.shift();
    blankcell2_1().innerText = 配列１[0]
    配列１.shift();
    blankcell3_1().innerText = 配列１[0]
    配列１.shift();
 }

試したこと

for(let i = 1; i < 配列１.length; i++){
    var blankcell1_1 = function blankcell1_1(i){
        var tds=[...document.querySelectorAll('table tr td:nth-child(i)')]
        var idx=tds.map(x=>x.textContent).indexOf("");
        console.log(idx<0?null:tds[idx]);
        return tds[idx]
    }
        blankcell1_1(i).innerText = 配列１[0]
        配列１.shift();
}

発生している問題・エラーメッセージ

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'table tr td:nth-child(i)' is not a valid selector.
    at blankcell1_1 (http://127.0.0.1:5500/ainori/script.js:128:30)

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

どうなったらいいんでしょうか

[hemuu]

言葉足らずで申し訳ございませんでした。
:nth-child(数字)の数字をループするごとに１づつ大きくなるようにしたいです。大きくなった数字は最大３までにしたです。

つまり、blankcellと名前のついたものが現在３つ（1_,2_,3_）ありますが
1つの変数名にして、:nth-child(1~3)を実行したいです。

Answer 1

var tds=[...document.querySelectorAll('table tr td:nth-child(i)')]

通常の文字列の中に変数名 i を入れても変数名として動きません。文字列連結するか、テンプレートリテラルを使いましょう。

let tds = [...document.querySelectorAll('table tr td:nth-child(' + i+ ')')];

let tds = [...document.querySelectorAll(`table tr td:nth-child(${i})`)];

Comments

[hemuu]

ご丁寧にありがとうございます。
勉強になりました。
２つの例は同じ処理を表しているということでお間違い無いでしょうか。

[int32_t]

そうです。
試してみれば一目瞭然かと。

Answer 2

1番目から3番目までのtd要素を取得したいのであれば、

const tds = document.querySelectorAll("table tr td:nth-child(-n+3)")

で取得できます。MDNにそのものの例が載っています。

また空のtd要素を取得したいなら、:empty疑似クラスが使えるかもしれません。

:nth-child()
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

:empty
https://developer.mozilla.org/ja/docs/Web/CSS/:empty

const tds = document.querySelectorAll("table tr td:nth-child(-n+3):empty");
tds.forEach(td => {
  td.textContent = 配列１[0];
  配列１.shift();
});