取得的成就

Question

考虑一个场景

我有一个表并有8列，每列有一些隐藏字段 - 让我们说5个隐藏字段。

我想要实现的目标是获取所有隐藏的字段＆＃39;单击特定单元格时的值，我还想从[单元格]中当前单击的行的第一个td中隐藏值

取得的成就

我能够获取当前点击的行细胞的第一个孩子的隐藏字段值，如下所示

element.closest("tr").find("td:first").find("input:hidden")

这将是reult 3，因为第一个单元格总是有3个输入。

我被困在哪里：

我获取了第一个单元格的隐藏输入值，但无法获取当前单击的单元格的隐藏输入值。

以下为示例HTML

<table>
   <tr>
      <td style="width: 50px;">4th Class( A ) 
         <input id="SectionID" name="SectionID" type="hidden" value="7">
         <input id="SectionDetailID" name="SectionDetailID" type="hidden" value="1">
         <input id="SectionName" name="SectionName" type="hidden" value="4th Class( A ) ">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">P D S</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">Hindi</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="1">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="Hindi">
      </td>
      <td class="cells" onclick="fetchData(this);">
         <div>
            <div class="dataRow">
               <div class="cellLabel">Name:</div>
               <div class="cellValue">J P Pl</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Sub:</div>
               <div class="cellValue">English</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Period:</div>
               <div class="cellValue">Period 2</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">From:</div>
               <div class="cellValue">11:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">To:</div>
               <div class="cellValue">12:00</div>
            </div>
            <div class="dataRow">
               <div class="cellLabel">Year:</div>
               <div class="cellValue">2014</div>
            </div>
         </div>
         <input id="TimeTableDtlID" name="TimeTableDtlID" type="hidden" value="3">
         <input id="TimeTableHdrID" name="TimeTableHdrID" type="hidden" value="7">
         <input id="PeriodID" name="PeriodID" type="hidden" value="38">
         <input id="PeriodName" name="PeriodName" type="hidden" value="Period 2">
         <input id="PeriodFromTime" name="PeriodFromTime" type="hidden" value="11:00">
         <input id="PeriodToTime" name="PeriodToTime" type="hidden" value="12:00">
         <input id="TTYear" name="TTYear" type="hidden" value="2014">
         <input id="SubjectName" name="SubjectName" type="hidden" value="English">
      </td>
   </tr>
   </tbody>
</table>

的jQuery

function fetchData(element) {
   var $element = $(element);
   var objHidden = [];
   console.log($element.closest("tr").find('td:first').andSelf().find("input:hidden").length); // Returns 19 Where it must be 11
   $element.closest("tr").find('td:first').andSelf().find("input:hidden").each(function (i, elem) {
      objHidden[elem.getAttribute("name")] = elem.value;
   });
   console.log(objHidden); // Getting same values always
}

Fiddle DEMO

修改

我点击单元格的简单方案意味着TD除了第一个，我想要当前点击的单元格的隐藏值以及第一个TD的隐藏值在当前行中未单击。

如何获取当前点击的单元格的隐藏字段以及最近行的第一个隐藏字段？

非常感谢任何形式的帮助。

Answer 1

andSelf和最后一个jQuery对象进入当前堆栈。但如果我们密切关注你的观点：

$element.closest("tr").find('td:first').andSelf().find("input:hidden")

你做.closest().find().andSelf()。这意味着andSelf返回.closest('tr')。

尝试改为使用add：

$element.closest("tr").find('td:first').add($element).find("input:hidden")

或者，您也可以使用它：

$element.siblings(":first").andSelf().find("input:hidden");

Answer 2

来自andSelf()上的jQuery文档：

当调用其中一个DOM遍历方法时，新的元素集将被压入堆栈。如果还需要前一组元素，.addBack（）可以帮助

所以你的查询：

$element.closest("tr").find('td:first').andSelf()

实际上不仅返回td:first的内容，还返回上一组元素的内容 - 这是tr，而不是您最初点击的元素。因此，您将获得所有19个隐藏input个元素，而不仅仅是第一个单元格中的3个元素和当前单元格中的8个元素。

[编辑 - 删除了可能的解决方案，接受的答案明显比我的还要好]

Answer 3

不确定您到底在寻找什么，所以继续快速演示在HTML上运行的JQuery选择器以获取某些部分。

http://jsfiddle.net/x3HN3/3/ （单击一个单元格并检查日志）;

请对这些字段的具体内容发表评论..

$('table tr>td').click(function() {
    var currentRow = $(this).parents('tr');
    console.log(currentRow);
    var currentCell = $(this);
    console.log(currentCell);
    var currentCellHtml = $(this);
    console.log(currentCellHtml);
    var numberOfHiddenCtrlsWithinCell = $(this).find(':input:hidden');
    console.log(numberOfHiddenCtrlsWithinCell);
    var numberOfHiddenCtrlsWithinRow = currentRow.find(':input:hidden');
    console.log(numberOfHiddenCtrlsWithinRow);
});

从这些变量中，您可以使用jquery选择器获得所需的任何内容..例如，从当前单击的单元格行获取第一个表格单元格的html你要做的事情 currentRow.find('td:first').html();

从当前单击的td和当前行的第一个td获取隐藏字段

取得的成就

我被困在哪里：

Fiddle DEMO

3 个答案: