Question

单击单选按钮时，如何更改表格td背景颜色？

这是在foreach循环的帮助下生成10个问题的视图，每个问题有4个单选按钮。制作第一个单选按钮名称ans [0]，第二个ans [1]等等

 <div class="col-lg-8" >
            <table class="table" style="width: 100%;">
            <?php 
            $i = 0;
            $ques = 1;            
            echo form_open('Menu/submit_ans', array('name' => 'quiz'));
            foreach ($quiz_array as $q){
            ?>    
            <td colspan="2"style="background-color: #337ab7;color:white;"><h4>Question No. <?php echo $ques?> </h4></td>
            <tr>
            <td style="background-color: #D3D3D3;color:white;" colspan="2"><h5><?php echo $q->ques;?></h5></td>
            <input hidden name="qid[]" type="text" value="<?php echo $q->qid;?>">
            <input hidden name="uid[]" type="text" value="<?php echo $user['id'];?>">
            </tr>
            <tr>
            <td><?php echo $q->ans_1;?></td>
            <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="1"></td>
            </tr>
            <tr>
            <td><?php echo $q->ans_2;?></td>
            <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="2"></td>
            </tr>
            <tr>
            <td><?php echo $q->ans_3;?></td>
            <td><input type="radio" class="myRadio"  name="ans[<?php print $q->qid; ?>]" value="3"></td>
            </tr>
            <tr>
            <td><?php echo $q->ans_4;?></td>
            <td><input type="radio" class="myRadio" name="ans[<?php print $q->qid; ?>]" value="4"></td>
            <input type="radio" hidden name="ans[<?php print $q->qid; ?>]" value="0" checked="checked">
            </tr>


            <?php 
                $i++;
                $ques++;
            }
            ?>
            </table>
            <center><button class="btn btn-success" type="submit">Submit!</button></a></center>
            <?php echo form_close();?>
        </div>

这是另一个div中的表格数据。

 <table class="table">
            <tr>
            <thead>
                <th colspan="10">Answer Status</th>
            </thead>
            </tr>
            <tr>
            <td class="color">1</div></td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            </tr>
</table>

当用户点击ans [0]单选按钮时，我想将td的背景颜色更改为1.

Answer 1

匹配您的编码风格：修改您的状态表TD＆＃39; s所以没有颜色类（并清理那个错误的结束div - 假设这是一个剪切和粘贴问题）

    <table class="table">
    <tr>
        <thead>
            <th colspan="10">Answer Status</th>
        </thead>
    </tr>
    <tr>
        <td class="answer answer1">1</td>
        <td class="answer answer2">2</td>
        <td class="answer answer3">3</td>
        ...
    </tr>
</table>

然后添加修改php的输出，使收音机看起来像

// For optional answers to Q1
<input type="radio" value="1,1" class="myRadio">
<input type="radio" value="1,2" class="myRadio">
...
// For optional answers to Q2
<input type="radio" value="2,1" class="myRadio">
<input type="radio" value="2,2" class="myRadio">
...

并将JS代码更改为

$('.myRadio').on('change', function() {
    var aSelection = $(this).val().split(",") // split 1,2 into an array

    var tgt="answer" + aSelection[0] // first digit in radio btn val

    if ($(this).prop("checked")) {
        $("." + tgt).css({ backgroundColor: "green"});
    }
})

我做了什么：我修改了单选按钮JQ选择器以使用特定的类而不是指定所有/任何无线电元素。这不需要是真实的＆＃39; css课。它只是用作选择器。我建议这样做的原因是，否则你的选择器会对任何单选按钮作出反应，这样如果你的页面包含任何其他无线电，你会发现当你没有期待它时，这个JS会被触发。在所有实际的术语中，使用类作为选择器的速度只比元素id快得多，因此这种方法没有实际的性能问题。

然后我将课程分配给了显示器TD＆＃39。单击无线电时，我们提取其值并使用此值来定位另一个表中的正确TD。

编辑：我的要求是错误的 - 它实际上是一个多选择的测验应用程序。有2个表。表1作为进度指示器，显示已回答了1至10个问题。当问题得到解答时，进度表中代表该问题的单元格应该变为阴影。表2包含问题，每个问题最多可包含4个答案，单选按钮用作选择答案的UI元素。当用户选择答案时，该事件应导致进度表着色发生。

这里的难点在于单选按钮的值必须同时用作问题编号指示符和问题选项指示符。我选择将这两个指标放在单选按钮值中作为＆＃39; q，a＆＃39;其中q是问题no和问题中的答案，所以＆＃39; 3,2＆＃39;表示问题3答案2.然后将无线电值拆分成一个数组，并且问题不用于在进度表中定位适当的TD。

这引入了一个问题，即当表单发送到服务器时，单选按钮值将作为＆＃39; q，a＆＃39;传输。 OP必须在服务器端处理这个问题。我相信php可以解决这个问题。

Answer 2

您可以抓住单选按钮然后处理他们的更改事件：

$('td input[type="radio"]').change(function(event)
{
if($(event.target).prop('checked'))
{
    /* send radio index from here */
    var index=    $(event.target).val();
    changeBackground(index);

}else
{
   /* some code if you want for false section */
}

})


function changeBackground(td_index)
{

   /* write you codes herer for changing the td color ...... use td_index paramerte */

}

Answer 3

Like this?

 $('input:radio').checked(function() {
      $(this).closest('td').addClass('highlight');
    });
    .highlight {
      background: green;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <tr id='game_1'>
      <td class='bowl'>Fiesta Bowl</td>
      <td id='radiocell'>
        <input type='radio' name=1 value='Arizona'></input>
      </td>
      <td class='team1'>Arizona</td>
      <td id='radiocell'>
        <input type='radio' name=1 value='Boise State'></input>
      </td>
      <td class='team2'>Boise State</td>
      <td class='gameDay'>January 1</td>
    </tr>

I hope that you can use this our tell me what you really want so I can write it for you :-) Copy of https://stackoverflow.com/a/27663896/7007968
I am not the writer of this code

Answer 4

假设：

color类是用于突出显示状态单元格的类。
您无法使用ID标记状态表，以便更轻松地进行查询选择器匹配。因此，table类和＆＃34;答案状态＆＃34; text用于匹配状态表。

使用jQuery的解决方案

var
    statusCells
;

// Find all cells in the status table.
statusCells = $(".table:contains('Answer Status')").find("td");

// Match elements that have an ID that starts with "ans".
// Listen to "change" events on these radio buttons.
$("[id^='ans']").change(function onChange(event) {
    var
        radio,
        value
    ;

    // Find the clicked radio button.
    radio = $(event.target);
    // Take the value of the radio button.
    value = radio.val();

    statusCells
        // Remove previous highlighting.
        .removeClass("color")
        // Find the status cell with text matching the value of the clicked
        // radio button.
        .filter(":contains('" + value + "')")
        // Highlight the matching status cell.
        .addClass("color");
});

Answer 5

你可以在你的JS中添加这个代码，我肯定会尝试它。

<强> JS：

function changeColColor(){
var tds=$("td");
for(id in tds){
var text=tds[id].innerHTML;
if(text==1){
tds[id].style.backgroundColor="green";
}
}
}

如果您想将其添加为课程，

tds[id].className ="green";

其中绿色将被定义为这样，

.green{
background-color:green;
}

<强> HTML：

然后在单击单选按钮时调用该函数，如下例所示

<input type="radio" name="ans0" value="1" onclick="changeColColor()">

选中无线电时更改表格td背景颜色

5 个答案: