Fatal编程技术网
  • javascript/
  • Javascript 从当前单击的td和当前行的第一个td获取隐藏字段

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

javascript jquery html

Javascript 从当前单击的td和当前行的第一个td获取隐藏字段,javascript,jquery,html,html-table,hidden,Javascript,Jquery,Html,Html Table,Hidden,考虑一个场景 我有一个表，有8列，每列都有一些隐藏字段，比如说5个隐藏字段 我试图实现的是在单击特定单元格时获取所有隐藏字段的值，我还希望从[cell]当前单击行的第一个td中获取隐藏值 成就 我能够获得当前单击的行单元格的第一个子单元格的隐藏字段值，如下所示 element.closest("tr").find("td:first").find("input:hidden") 这将重新分配3，因为第一个单元格始终有3个输入 我被困的

考虑一个场景

我有一个表，有8列，每列都有一些隐藏字段，比如说5个隐藏字段

我试图实现的是在单击特定单元格时获取所有隐藏字段的值，我还希望从[cell]当前单击行的第一个td中获取隐藏值

成就 我能够获得当前单击的行单元格的第一个子单元格的隐藏字段值，如下所示

element.closest("tr").find("td:first").find("input:hidden")
这将重新分配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>

编辑

这是一个简单的场景，当我点击cell means
TD
时，除了第一个，我想要当前点击的单元格中的隐藏值，以及当前行中未点击的第一个
TD
中的隐藏值

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

非常感谢您提供的任何帮助。

不确定您到底在寻找什么，因此下面是在HTML上运行JQuery选择器以获取特定部分的快速演示

（单击单元格并检查日志）

请给出一些评论，说明您希望从这些字段中得到什么

$('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（）
不确定您到底在寻找什么，因此这里有一个在HTML上运行JQuery选择器以获取特定部分的快速演示


（单击单元格并检查日志）

请给出一些评论，说明您希望从这些字段中得到什么


$('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（）
来自
和self（）上的jQuery文档
：

当调用一个DOM遍历方法时，新的元素集被推送到堆栈上。如果还需要上一组元素，.addBack（）可以提供帮助

因此，您的查询是：


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


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


[编辑-删除了可能的解决方案，接受的答案比我的答案要整洁得多]
来自
和self（）上的jQuery文档：

当调用一个DOM遍历方法时，新的元素集被推送到堆栈上。如果还需要上一组元素，.addBack（）可以提供帮助

因此，您的查询是：


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


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


[编辑-删除可能的解决方案，接受的答案明显比我的更整洁]
和self
以及当前堆栈中的最后一个jQuery对象。但如果我们仔细观察您的产品线：


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


您可以执行
.closest（）.find（）.andSelf（）
。因此，这意味着
和self
返回
最近的（'tr'）

尝试使用
添加
：


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


或者，您也可以使用该选项：


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



和self
以及当前堆栈中的最后一个jQuery对象。但如果我们仔细观察您的产品线：


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


您可以执行
.closest（）.find（）.andSelf（）
。因此，这意味着
和self
返回
最近的（'tr'）

尝试使用
添加
：


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


或者，您也可以使用该选项：


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



没关系。这是一个简单的场景，当我点击单元格时意味着除了第一个，我想要当前点击的单元格中的隐藏值，以及第一个未点击的
TD
中的隐藏值无法理解你的意思对不起：/这将得到u的值，但我真的不知道您需要什么..：（谢谢你，朋友。我找到了解决方案。没关系。这是一个简单的场景，当我点击单元格时意味着
TD
，除了第一个，我想要当前点击的单元格中的隐藏值，以及第一个未点击的
TD
中的隐藏值。我无法理解你的意思。对不起。：：这会得到你的值，但我真的不知道你所需要的：（谢谢你，朋友。我找到了解决办法。靶心。你做到了。谢谢你，朋友。你投了赞成票，因为你能在一行上做到这一点；我认为这是不可能的。靶心。你做到了。谢谢你，朋友。你投了赞成票，因为你能在一行上做到这一点；我认为这是不可能的。