Question

假设我在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已修复）。有关如何通过单击？

获取不同值的任何想法

Answer 1

首先，您的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);
});

Example fiddle

Answer 2

首先在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);
});

Fiddle Example

我希望它会对你有所帮助。

Answer 3

虽然你的ID在语义上可能是错误的，但由于ID必须是唯一的，我认为你的ID必须附上引号。

您必须使用每个功能循环访问ID。 Here's the code I posted over 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);

    });

});

Answer 4

id=rowID1

id必须是唯一的并且只使用一次，所以你的javascript总是会获得id的第一个实例。我会使用类，然后在jQuery中执行类似的操作：

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

请记住更改ID，但应使用类

Answer 5

你知道，get by id总是只返回一个元素因为id必须是相同的，但是按类返回总是数组，如果找不到，则返回[]（空数组）。您可以使用jquery来检查自己：

$('#anyId')＆lt; - 它是由id

获取的

$('.anyClassName')＆lt; - 按类名获取

<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>

通过单击在jquery中读取表中的div元素值

5 个答案: