ホームページ > ウェブフロントエンド > htmlチュートリアル > tb というテーブルには n 行、m 列があり、各行に m 個の tds があります。stid という ID を持つグリッドをクリックすると、それがどの列と行であるかを確認できますか。 _html/css_WEB-ITnose

tb というテーブルには n 行、m 列があり、各行に m 個の tds があります。stid という ID を持つグリッドをクリックすると、それがどの列と行であるかを確認できますか。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:20:11
オリジナル
1574 人が閲覧しました

tb というテーブルには n 行と m 列があり、各行に m 個の TD があります。stid という ID を持つ TD グリッドをクリックすると、これがどの列と行であるかわかりますか。それとも、stid が配置されている行のヘッダー (最初の td の内容) とその列の列ヘッダーを見つけることができますか? ?


ディスカッションに返信(解決策)

S('#stid').coloumn.headerを使用してみましたが、うまくいきませんでした

各TDに隠しフィールドを追加すると問題は解決するはずですが、私は感じていますこのメソッドはあまり良くありません。js で既製のものがあるかどうかはわかりません。

それを取得するための既成のメソッドはないようです

はい、$("#stid").parent().index() です。 stid という ID を持つ td が配置されている場所です。行のインデックス値を使用して行番号を取得できます。
同様に、$("#stid").index() を使用して、 td 列、それによって列番号を取得します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        td        {            height: 30px;            width: 50px;            text-align: center;            border: 1px solid #333333;        }    </style></head><body>    <div>        <table id="tb">            <tr>                <td>                    1                </td>                <td>                    2                </td>                <td>                    3                </td>                <td>                    4                </td>                <td>                    5                </td>                <td>                    6                </td>                <td>                    7                </td>            </tr>            <tr>                <td>                    8                </td>                <td>                    9                </td>                <td>                    10                </td>                <td>                    11                </td>                <td>                    12                </td>                <td>                    13                </td>                <td>                    14                </td>            </tr>            <tr>                <td>                    15                </td>                <td>                    16                </td>                <td>                    17                </td>                <td>                    18                </td>                <td>                    19                </td>                <td>                    20                </td>                <td>                    21                </td>            </tr>            <tr>                <td>                    22                </td>                <td>                    23                </td>                <td>                    24                </td>                <td>                    25                </td>                <td>                    26                </td>                <td>                    27                </td>                <td>                    28                </td>            </tr>            <tr>                <td>                    29                </td>                <td>                    30                </td>                <td>                    31                </td>                <td>                    32                </td>                <td>                    33                </td>                <td>                    34                </td>                <td>                    35                </td>            </tr>            <tr>                <td>                    36                </td>                <td>                    37                </td>                <td>                    38                </td>                <td>                    39                </td>                <td>                    40                </td>                <td>                    41                </td>                <td>                    42                </td>            </tr>        </table>    </div></body></html><script type="text/javascript">    var Table = document.getElementById("tb");    for (var i = 0; i < Table.rows.length; i++) {        for (var j = 0; j < Table.rows[i].cells.length; j++) {            Table.rows[i].cells[j].onclick = function () {                var Table = document.getElementById("tb");                for (var i = 0; i < Table.rows.length; i++) {                    for (var j = 0; j < Table.rows[i].cells.length; j++) {                        if (this.innerText == Table.rows[i].cells[j].innerText) {                            alert("  该TD的值为:" + this.innerText + "  行数为:" + i + "   列数为" + j + "  第一行的值为:" + Table.rows[i].cells[0].innerText);                        }                    }                }            }        }    }</script>
ログイン後にコピー

元の投稿者、純粋な JS コード

JavaScript コードを助けることができれば幸いです39404142434445464748495051525354555 657585960616263646566676869707172737475767778798081828384858687888990...
問題があるようです、値が未定義をクリックして列を順に参照してください

どのブラウザを使用していますか? IE8/Google では問題ありません

使用しているブラウザは何ですか? IE8/Google では問題ありません
360

どのブラウザを使用していますか? ? IE8/Google は問題ありません
違います、Firefox は未定義です

互換性が確立されれば、それは動作します。 /Google もう一度お試しください

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート