Как установить цвет фона для каждого столбца в таблице?

Question

У меня есть таблица с четырьмя столбцами и двумя строками, у 4-го столбца есть кнопка для каждой строки, теперь я хочу изменить цвет фона во втором столбце второй строки, щелкнув по кнопке для каждой строки. Пожалуйста, дайте мне знать, как это сделать?

Здесь я разместил свой код для справки.

$(function(){ 
    $('input').click(function(){ 
     $('table').find('tr td:eq(1)').css('background-color', 'red'); 
    }); 
}); 

HTML

<table border="1" style="border-collapse:collapse;"> 
    <tr> 
     <td>1</td> 
     <td>jai</td> 
     <td>description</td> 
     <td><input type="button" value="button"></input></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>sul</td> 
     <td>description</td> 
     <td><input type="button" value="button"></input></td> 
    </tr> 
</table> 

Answer 1

Найдите tr, содержащий кнопку с помощью closest(), а затем найти вторую колонку, используя которые

$(function() { 
 
    $('input').click(function() { 
 
    $(this).closest('tr').find('td:eq(1)').css('background-color', 'red'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" style="border-collapse:collapse;"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>jai</td> 
 
    <td>description</td> 
 
    <td> 
 
     <input type="button" value="button"></input> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>sul</td> 
 
    <td>description</td> 
 
    <td> 
 
     <input type="button" value="button"></input> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Вам не нужно использовать тяжелый JavaScript/JQuery для этого случая. Вместо этого вы можете использовать <col>:

<table border="1" style="border-collapse:collapse;"> 
 
    <col style="background-color: #f00;" /> 
 
    <col style="background-color: #0f0;" /> 
 
    <col style="background-color: #00f;" /> 
 
    <col style="" /> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>jai</td> 
 
    <td>description</td> 
 
    <td><input type="button" value="button" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>sul</td> 
 
    <td>description</td> 
 
    <td><input type="button" value="button" /></td> 
 
    </tr> 
 
</table>

Также обратите внимание, что у вас нет </input>, которые могут потерпеть неудачу некоторый код (например, синтаксические маркеры.).

Answer 3

Попробуйте это,

Если вы знаете родителя() в JQuery затем вы также можете попробовать это,

$(function() { 
    $('input').click(function() { 
    $(this).parent().parent().find('td:eq(1)').css('background-color', 'red'); 
    }); 
}); 

"$ (this) .parent(). Parent(). Find ('td: eq (1)')" В этой строке js он дважды переместится в свой родительский тег, значит щелчок на $ (this) и от него он дважды переместится в свой родительский тег, чтобы добраться до своего тега, и с этой позиции он найдет td в позиции 1. С этого момента вы можете выполнять операцию изменения цвета, как показано в приведенном выше js-коде.