1

CSS属性なしでテーブルを取得します。一部の列はオプションです。

<TABLE>
<TR>
    <TH>name A(optional)</TH>
    <TH>name B</TH>
    <TH>name C</TH>
</TR>
<TR>
    <TD>name 1A(optional)</TD>
    <TD>name 1B</TD>
    <TD>name 1C</TD>
</TR>
<TR>
    <TD>name 2A(optional)</TD>
    <TD>name 2B</TD>
    <TD>name 2C</TD>
</TR>
</TABLE>

「name B」という名前の列を選択する必要がありますが、この列は常に 2 番目であるとは限りません。そのため、名前に従って選択する必要があります。

ヘッダーの id 属性による最悪のシナリオ

<TH id="nameB">name B</TH>
4

4 に答える 4

3

次のようにセルの内容を調べることができます。

var ths = document.getElementsByTagName('th');
var tds = document.getElementsByTagName('td');
var column = [];
for (var i=0; i<ths.length; i++) {
    if (ths[i].innerHTML.match(/name \d*B/)) {
       column.push(ths[i]);
    }
}
for (var i=0; i<tds.length; i++) {
    if (tds[i].innerHTML.match(/name \d*B/)) {
       column.push(tds[i]);
    }
}
console.log(column);

デモを参照してください。

または、単に列の見出しを一致させて、残りの要素を取得します。

var ths = document.getElementsByTagName('th');
var trs = document.getElementsByTagName('tr');
var column = [];
for (var i=0; i<ths.length; i++) {
    if (ths[i].innerHTML.indexOf('name B') !== -1) {
        var id = i;
        break;
    }
}
for (var i=0; i<trs.length; i++) {
    column.push(trs[i].children[id]);
}
console.log(column);

デモを参照してください。

于 2013-06-13T18:34:46.507 に答える
1

これが自分で設計しているテーブルである場合は、次の説明に従って、テーブルの列の書式設定について学習することで進歩できる可能性があります。

http://www.w3.org/TR/CSS21/tables.html#columns

以下も参照してください。

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.2

これは、CSS デザインの本ではあまり言及されていない、より高度なトピックです。一見の価値があります。

于 2013-06-13T18:47:50.030 に答える
0

css の負担のない非常にシンプルなソリューションが必要な場合は、このように選択するすべての要素に同じクラスを適用するだけで済みます。

<TABLE>
    <TR>
        <TH>name A(optional)</TH>
        <TH class="red">name B</TH>
        <TH>name C</TH>
    </TR>
    <TR>
        <TD>name 1A(optional)</TD>
        <TD class="red">name 1B</TD>
        <TD>name 1C</TD>
    </TR>
    <TR>
        <TD>name 2A(optional)</TD>
        <TD class="red">name 2B</TD>
        <TD>name 2C</TD>
    </TR>
</TABLE>

あとは思い通りにスタイリングして、

.red {
    background: red;
}
于 2013-06-13T19:14:56.643 に答える