Обновления входной цвет фона JQuery внутри тд тег

Question

У меня есть таблица с тр, которые имеют этот шаблон

<tr> 
     <td width="37" align="left"></td> 
     <td width="200" align="left"> 
      <input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">&nbsp; &nbsp; 
      <input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;"> 
     </td> 
     <td width="340" align="center"> 
      <input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;"> 
     </td> 
     <td class="hide"></td> 
</tr> 

То, что я хочу сделать, это OnClick этой кнопки, которая будет иметь ту же последовательность, соответствующую входной пример кнопку идентификатор = s1 input id = info1 Я хочу изменить цвет фона. Я предпочитаю jquery или javascript в порядке. Я думал о регулярных выражений с начиная с ..^..

function ChangeThis(x) { 
    $(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow'); 
} 

Это не работает, я пробовал тр а тд

UPDATE/EDIT

Так по существу то, что я хочу является то, что при нажатии на кнопку, что есть предопределенные вещи, чтобы изменить в тексте

1. Цвет шрифта
2. Жирный или не
3. Цвет фона

Answer 1

UPDATE

Хорошо, я думаю, я понимаю, что вы хотите. Дайте мне знать, если это скрипка решает ее:

https://jsfiddle.net/14ymd0pd/

---

На основании вашего описания, я немного запутался, что вы хотите.

Я создал JSFiddle с тем, что, как я думаю, является предполагаемой функциональностью.

https://jsfiddle.net/tvu08yrm/

Основные отличия участвуют выделяющий JavaScript, используя JQuery обработчик on события:

$('.color-btn').on('click', function(){ 

добавить новый класс (color-btn), так что кнопки могут быть целенаправленные и изменения функций, trraverse DOM Elements.

Несколько примечаний:

• Вы не должны использовать встроенный JavaScript. Я отделил JavaScript в своей скрипке.
• Поскольку я могу видеть только небольшую часть кода, мне сложно сказать, но если страница не будет отображать табличные данные, то не отображать ее в таблице ... используйте div или ul или другой соответствующий элемент, а не таблицу.
• Я не делал этого в своей скрипке, но вы также должны перемещать встроенный css из разметки и в внешний файл css.
• JavaScript зависит от структуры таблицы, если вы измените ее структуру, вам также потребуется обновить селектора jQuery. Этого можно избежать, соблюдая соглашение об именах в строках таблицы и используя их для нацеливания на соответствующие элементы вместо их относительных позиций.

Позвольте мне знать, если скрипку ответил на ваш вопрос :)

Answer 2

Есть много решений, чтобы получить код работает.

Первое решение: использовать й вместо этого внутри функций

• Pro: код работает
• контра: плохой стиль кодирования, и вы не должны использовать встроенный JavaScript.

Второе решение: изменить onclick="changeThis(this)" к onclick="changeThis.call(this)"

• про: код работает, и вы можете использовать это в контексте функции
• противопоказаны: вы используете это в контексте функции ... есть только несколько ситуаций для этого. это не такая ситуация. и снова: inline-javascript

Третье решение: не использовать onclick.

<tr> 
     <td width="37" align="left"></td> 
     <td width="200" align="left"> 
      <input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">&nbsp; &nbsp; 
      <input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;"> 
     </td> 
     <td width="340" align="center"> 
      <input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;"> 
     </td> 
     <td class="hide"></td> 
</tr> 

$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis); 

Вы должны использовать третий.