1

假设我在 html 中有表结构，例如：

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 1 </div>
   <div id=rowID2 > 2 </div>
   <div id=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 4 </div>
   <div id=rowID2 > 5 </div>
   <div id=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 7 </div>
   <div id=rowID2 > 8 </div>
   <div id=rowID3 > 9 </div>

  </div>
</tr>

每个 tr 是表格的一行，当我单击每一行时，我想显示 1、4 和 7，这是第一个 div 元素。当我尝试console.log(document.getElementById("rowID1").innerHTML);点击我点击的每一行时，我得到“1”，但我希望它显示不同的值。我无法更改 ID（因此 rowID1 是固定的）。知道如何通过单击获得不同的值吗？

4

5 回答 5

4

首先，您的 HTML 无效，因为您需要将td元素放入 中tr，id属性应该被引用，您缺少=行class属性，并且您有很多重复的id属性。一旦修复：

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

此 jQuery 代码将起作用：

$('.Row div').click(function() {
    var idx = $(this).index() + 1;
    var values = $('.rowID' + idx).map(function() {
        return this.innerText;
    }).get().join(',');

    alert(values);
});

示例小提琴

于 2013-10-23T11:37:40.113 回答
3

首先在 html 代码中应该是唯一的，因此要么删除所有“myRow”，要么更改它们。现在，通过单击下面的代码获取每个 div 的值可能会解决您的问题：

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

像这样更新你的html。那么这是您的解决方案：-

$("table tr").on("click",function(e){

   var targetNode = e.target, parentNode, childNode, firstChildValue,
   hasChild=(targetNode.children.length>0) ? 1:0;

   parentNode = (hasChild) ? targetNode.children[0]: targetNode.parentNode; // get parent node of target node
   child = parentNode.children; // get all its children
   firstChildValue = child[0].innerHTML; // get value of first child
   alert(firstChildValue);
});

小提琴示例

我希望它会帮助你。

于 2013-10-23T11:59:50.037 回答
1

尽管您的 ID 在语义上可能是错误的，因为 ID 必须是唯一的，但我认为您的 ID 必须用引号括起来。

您必须使用每个函数遍历 ID。这是我在 jsfiddle 上发布的代码

$(function(){

            $('div#myRow').click(function(){

                $('div#rowID1').each(function(){

                    var text = $(this).text();

                    alert(text);

                });
            });
        });

这里只获取 ID 为 rowID1 的子 div：

$(function(){
$('div#myRow').click(function(){

    var text = $(this).children('#rowID1').text();

    alert(text);

    });

});
于 2013-10-23T11:48:57.290 回答
0

要知道，通过 id 获取总是只返回一个元素，因为id必须相同，但是通过类获取总是返回数组，如果没有找到，则返回[]（空数组）。您可以使用以下方式检查自己jquery：

$('#anyId')<-- 通过 id 获取

$('.anyClassName')<-- 通过类名获取

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-1.8.1.min.js"></script>

<script>
    $(function() {
      $('.Row div').click(function(e) {
        var currentDiv = $(e.currentTarget);
        currentClass = currentDiv.attr('class');
        console.log($('.' + currentClass).text());
      });

    });
</script>

</head>

<body>
<table>
<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 1 </div>
   <div class=rowID2 > 2 </div>
   <div class=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 4 </div>
   <div class=rowID2 > 5 </div>
   <div class=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 7 </div>
   <div class=rowID2 > 8 </div>
   <div class=rowID3 > 9 </div>

  </div>
</tr>
</table>
</body>
</html>
于 2013-10-23T11:59:57.080 回答
0 
id=rowID1

id 必须是唯一的并且只使用一次，因此您的 javascript 总是会获取 id 的第一个实例。我会使用类，然后在 jQuery 中做这样的事情：

$(document).ready(function(){
    $('.Row').on('click', function(){
        console.log($(this).closest('#rowID1').text());
    });
});

记住要更改 ID，但应该使用类

于 2013-10-23T11:33:19.677 回答