Блог

Главная - Вопросы по программированию - сравнение двух столбцов, если одно значение столбца находится в тексте, а другое — переключатель в html

сравнение двух столбцов, если одно значение столбца находится в тексте, а другое — переключатель в html

#javascript #html #jquery

#javascript #HTML #jquery ( jquery )

Вопрос:

как сравнить два столбца, если одно значение столбца находится в тексте (OK / NG), а другое — переключатель (оценка вручную) и вывод результата в третьем столбце (разница) в HTML? Мне нужно сравнить два столбца и опубликовать результат в третьем столбце, используя jquery или javascript, я новичок в html и stackoverflow, пожалуйста, пока игнорируйте мой стиль кодирования, он улучшится со временем и практикой

Изображение моей таблицы добавлено для вашей справки

изображение таблицы данных

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
      

</head>
<body>
  <div class="container">
    <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li
                        role="presentation" class="active"><a 
                        href="/">Home</a>
                        
                    </li>

                    </li>
                </ul>
            </nav>
            <h2> Table </h2>
        </div>
    </div>

<h2><center>TABLE</center></h2>
<div id="content"  >

 <table id="tbl" class="sortable" align="center" >
  <tr>
    <th><center>No.</center></th>
    <th><center>OK/NG</center></th>
    <th><center>Manual Eval</center></th>
      <th><center>Difference</center></th>
  </tr>
  <tbody>
     <tr>

    <td></td>
    <td>OK</td>
    <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
    </td>
        <input type="hidden" name="selection"  />
    <td name ="diff"> </td>
     </tr>

  <tr>

    <td></td>

    <td>OK</td>

      <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
    </td>
        <input type="hidden" name="selection"  />
    <td name ="diff"> </td>
  </tr>
  <tr>

    <td></td>

    <td>OK</td>
    <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
    </td>
        <input type="hidden" name="selection"  />
    <td name ="diff"> </td>
  </tr>
  <tr>
    <td></td>
    <td>OK</td>
    <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
    </td>
        <input type="hidden" name="selection"  />
    <td name ="diff"> </td>


  </tr>
  <tr>
    <td></td>
    <td>NG</td>
    <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
    </td>
        <input type="hidden" name="selection"  />
    <td name ="diff"> </td>
    </tr>
    </tbody>

 </table>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

Комментарии:

1. в чем ваш вопрос, его непонятно. Чего именно вы хотите?

2. столбец 2 (OK / NG) имеет значения в тексте, а столбец 3 (ручная оценка) имеет переключатель, если у col2 есть OK, а у col3 есть NG, выбранный пользователем, должен быть автоматический текст «проверено в col4 (разница), если оба col2 и col3 имеют одинаковые значения, тогда должно бытьпробел в col4

3. name количество переключателей должно отличаться для каждой строки. Кроме того, чего вы пытались достичь выше?

4. решение моей проблемы близко к этому jsbin.com/equwi6/2/edit?html , js,вывод , но в моем случае это переключатель

5. @Swati, пожалуйста, проверьте ссылку выше

Ответ №1:

Я решил это сам, для всех, кто хочет получить решениеизображение для справки

 function checkDiff(){
  var radioArr =[]
  var radio = document.getElementsByClassName('selection');
  var predict = document.getElementsByClassName('pred');
  var difference = document.getElementsByClassName('diff');
  //console.log(predict.length);
  for( var i = 0; i < radio.length; i   ){
    if(radio[i].name="selection") {
      //console.log(radio[i].value,i);
      if(radio[i].checked){
        radioArr.push(radio[i].value)
      }
    }
  }
  //console.log(radioArr)

  for( var i = 0; i < radioArr.length; i   ) {
    if(radioArr[i] !== predict[i].innerHTML) {
        console.log(i,predict[i].innerHTML,radioArr[i]);
        difference[i].innerHTML ="amp;#10003"
    } els e{
      difference[i].innerHTML ="same"
    }
  }
} 
 <div class="container">
  <div class="header">
    <nav>
        <ul class="nav nav-pills pull-right">
            <li
                role="presentation" class="active"><a 
                href="/">Home</a>
                
            </li>

            </li>
        </ul>
    </nav>
    <h2> Table </h2>
  </div>
</div>

<h2><center>TABLE</center></h2>
<div id="content">

 <table id="tbl" class="sortable" align="center" >
  <tr>
    <th><center>No.</center></th>
    <th><center>OK/NG</center></th>
    <th><center>Manual Eval</center></th>
      <th><center>Difference</center></th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>OK</td>
      <td align="center">
          <input type="radio" name = "selection" value="ok" > OK
          <input type="radio" name = "selection" value="ng"> NG </br>
      </td>
          <input type="hidden" name="selection"  />
      <td name ="diff"> </td>
    </tr>
    <tr>
      <td></td>
      <td>OK</td>
      <td align="center">
        <input type="radio" name = "selection" value="ok" > OK
        <input type="radio" name = "selection" value="ng"> NG </br>
      </td>
        <input type="hidden" name="selection"  />
      <td name ="diff"> </td>
    </tr>
    <tr>
      <td></td>
      <td>OK</td>
      <td align="center">
          <input type="radio" name = "selection" value="ok" > OK
          <input type="radio" name = "selection" value="ng"> NG </br>
      </td>
          <input type="hidden" name="selection"  />
      <td name ="diff"> </td>
    </tr>
    <tr>
      <td></td>
      <td>OK</td>
      <td align="center">
          <input type="radio" name = "selection" value="ok" > OK
          <input type="radio" name = "selection" value="ng"> NG </br>
      </td>
          <input type="hidden" name="selection"  />
      <td name ="diff"> </td>
    </tr>
    <tr>
      <td></td>
      <td>NG</td>
      <td align="center">
          <input type="radio" name = "selection" value="ok" > OK
          <input type="radio" name = "selection" value="ng"> NG </br>
      </td>
          <input type="hidden" name="selection"  />
      <td name ="diff"> </td>
      </tr>
    </tbody>
 </table>
</div>