Question

以下是一些示例代码：

<table>

 <tr>
  <td>Caption1</td>
  <td>Caption2</td>
 </tr>

 <tr>
  <td><input id="input1" type="text"></td>
  <td><input id="input2" type="text"></td>
 </tr>

</table>

鉴于上面的代码，第二行只有输入字段的id，如何将标题从“Caption2”更改为其他内容？我怎么能隐藏整个第二列？

PS：只允许使用纯js或Jquery。

Answer 1

尝试使用:contains()之类的，

$(function(){
   $('td:contains(Caption2)').text('New Caption');
});

Demo

或者，您可以使用:first和:eq()之类的，

$(function(){
    $('tr:first td:eq(1)').text('New Caption');
});

Demo 1

您可以使用#input1的方式，也可以

$(function(){
    $('#input1').closest('tr')// finds the row having #input1
                .prev('tr') // finding the previous row
                .find('td:eq(1)') // get the second column
                .text('New Caption'); // set the new caption
});

Demo 2

Answer 2

您可以尝试select the first row然后the second column这样

$( "table tr:nth-child(1) td:nth-child(2)" ).html("new Caption");

Answer 3

你也可以使用第一个tr，然后是第一个td

$('table tr:first td:first').text("you new caption");

Answer 4

对于第一项任务（将标题从“Caption2”更改为其他内容），您可以使用以下内容：

   $(function(){
       $('#input2').click(function(){
          //get child index WRT parent tr
          var parent = $(this).parent()
          var index_row = $(parent).index(); 
          //assuming the structure of the html is not going to change
          $(parent).parent().prev().children().eq(index_row).html('Something Else');
       });
   });

请参阅http://jsfiddle.net/8Jvjv/

Answer 5

遍历DOM

$("#input1")       /* start with the ID you want */
 .closest("table") /* traverse up to find the table tag */
 .find("tr")       /* find tr tags */
 .first()          /* just grab the first (header) row */
 .find("td")       /* grab all td tags */
 .last()           /* we want the last one here */
 .html("new caption"); /* update the HTML */

请参阅小提琴：http://jsfiddle.net/LMLdR/

所有人都在一起：

$("#input1").closest("table").find("tr").first().find("td").last().html("new caption");

有没有办法更改没有id或名称的表的第一行的标题？

5 个答案: