Javascript функция работает только отладка

Question

У меня есть эта Javascript функции, скрыть столбец из таблицы:

function hideColumn (name) { 
    column = $("#taula-thead td:contains("+name+")")[0].cellIndex; 
    $("#taula-thead td:contains("+name+")").hide(); 
    $("#taula-tbody td:nth-child("+(column+1)+")").hide(); 
} 

Таким образом, когда нагрузка на странице, другая функцию чтения печенья, чтобы увидеть, какие столбцы должны скрывать и вызывает эту функцию для каждой из этих столбцов. Но функция только скрывает эту часть.

Я отлаживаю его и ... код работает, когда я его отлаживаю. Поэтому, хотя, возможно, проблема заключалась в том, что она выполняется слишком быстро или что-то еще, и помещает функцию в setTimeout. Но он тоже потерпел неудачу. Наконец, я попробовал написать это так: $("#taula-thead td:contains("+name+")").hide() && $("#taula-tbody td:nth-child("+(column+1)+")").hide();, но ... он также терпит неудачу.

Итак ... Я не могу отлаживать код, потому что он работает с отладкой, и я даже не уверен, в чем проблема.

Update

Я выяснить проблему, но не является хорошим решением. Я выполняю эту функцию сразу после другой функции, которая вставляет много строк. Похоже, когда javascript выполняет это, строки еще не обнаружены, поэтому он скрывает только часть thead.

Если я положил функцию внутри setTimeout с задержкой 50 мс, она работает. Если он имеет 30 мс, он работает иногда. Если он имеет 10 мс, он никогда не работает. Я ищу способ узнать, когда новые строки правильно настроены, а затем выполнить эту функцию.

Answer 1

Вы должны добавить цитаты. Таким образом:

column = $("#taula-thead td:contains(" + name + ")")[0].cellIndex; 

На самом деле ваш код работает, см. Сниппет. Если есть проблема, то в остальной части вашего кода вы не отправляете сообщения.

Рабочий фрагмент кода:

function hideColumn(name) { 
 
    column = $("#taula-thead td:contains(" + name + ")")[0].cellIndex; 
 
    $("#taula-thead td:contains(" + name + ")").hide(); 
 
    $("#taula-tbody td:nth-child(" + (column + 1) + ")").hide(); 
 
}

table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Click on a column to hide it</p> 
 
<table> 
 
    <thead id="taula-thead"> 
 
    <tr> 
 
     <td onclick='hideColumn("ID")'>ID</td> 
 
     <td onclick='hideColumn("name")'>name</td> 
 
     <td onclick='hideColumn("some other column")'>some other column</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id='taula-tbody'> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    </tbody> 
 
</table>