Как получить следующий столбец строки с помощью Javascript или JQuery

Question

Ниже структуры, где я есть проблемы

<tr> 
    <td>1</td> 
    <td>2</td> 
    <td> 
     <button onclick=someFunc() class='btn'>DoSomething</button> 
    </tr> 
</tr> 
<tr> 
    <td colspan='3' style = "height: 400px; width: 500px"> 
     <div id='container'></div> 
    </td> 
</tr> 

И здесь я не могу получить доступ к столбцу с идентификатором Colspan = «3» и DIV с идентификатором «контейнер 'при нажатии кнопки. Я знаю его очень нужный вопрос, но я новичок в javasript и не могу найти конкретный вопрос с хорошим объяснением.

Здесь я пытаюсь получить доступ к моему DIV

$(".btn").click(function(){ 
    $(this).parent('tr').next('td').hide(); 
}); 

EDIT

Его таблица некоторой информации порядка. И когда кнопка нажата, div должен скрыть или показать график. График будет в div с классом = «контейнер». Поэтому я думал показать некоторую статистическую информацию, и если пользователь хочет показать график, я покажу ему это.

Answer 1

И при нажатии кнопки соответственно div должен скрывать или показывать граф.

Попробуйте заменить .toggle() для .hide()

---

Да, я могу сделать так. Но у меня есть сотни блоков кодов вроде выше. И соответственно сотни divs с id "container". Я хочу специальная специальная функция, которая скрывается только в блоке, где кнопка нажата.

Попробуйте изменить id=container к class=container, затем выберите container для toggle использования .index()

---

$(".btn").on("click", function(e) { 
 
     // substituted `.toggle()` for `.hide()` 
 
     $(".container").eq($(this).index(".btn")).parent().toggle(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<table> 
 
    <tbody> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td> 
 
     <button class='btn'>DoSomething</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan='3' style = "height: 400px; width: 500px"> 
 
     <div class='container'>a</div> 
 
    </td> 
 
</tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td> 
 
     <button class='btn'>DoSomething</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan='3' style = "height: 400px; width: 500px"> 
 
     <div class='container'>b</div> 
 
    </td> 
 
</tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td> 
 
     <button class='btn'>DoSomething</button> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan='3' style = "height: 400px; width: 500px"> 
 
     <div class='container'>c</div> 
 
    </td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 2

Родитель кнопки является td не tr вам нужно использовать closest() найти tr, содержащий кнопку, а затем использовать .next(), чтобы получить следующий tr элемент и .find('td') найти td внутри него

jQuery(function($) { 
 
    $(".btn").click(function() { 
 
    $(this).closest('tr').next().find('td').hide(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td> 
 
     <button onclick=someFunc() class='btn'>DoSomething</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan='3' style="height: 400px; width: 500px"> 
 
     <div id='container'>soemthing</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

$(this).parents('tr').next('tr').hide() 

это может работать

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
<table> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td> 
     <button onclick='someFunc(this)' class='btn'>DoSomething</button> 
    </td> 
    </tr> 
    <tr> 
    <td colspan='3' style="height: 400px; width: 500px"> 
     <div id='container'>soemthing</div> 
    </td> 
    </tr> 
</table> 


<script> 
function someFunc(BTN){   
     $(BTN).closest('tr').next('tr').find('td').hide(); 
    } 
</script> 

Demo