个人中心
gpt4 book ai didi

javascript - JS动态更改表中的数据

转载 作者：太空宇宙 更新时间：2023-11-04 16:27:54 25 4
gpt4 key购买 nike

我正在创建一个接口(interface)，该接口(interface)将从两个不同的数据库获取数据，将该数据提供给该接口(interface)，并使用该接口(interface)来确定哪条信息将存储到新数据库中。 (基本上创建一个系统来合并数据库，但用户可以选择将哪些数据传递到新数据库。)在此界面中还会有一个文本框，以便用户可以输入数据，以防两个数据库都有不正确的数据。

目前，我只使用这两个数据库的一部分，并希望实现一种复选框系统，用户可以选中一个复选框来选择数据，如果他们想要另一个复选框，则前一个复选框将转到错误的。

我找到了一种方法来做到这一点，但它会吸收整个表单，一旦你尝试使用另一个表行，它就会崩溃。我想尝试让 JS 独立于每个表行。有没有办法对每一行实现这样的机制？这是我当前的代码:(Ps. HTML曾经是PHP文件)

HTML:

<html>
  <head>
    <script src="jquery-1.12.4.min.js"></script>
    <script src="formAdd.js"></script>

    <link rel="stylesheet" type="text/css" href="dbInfo.css">
    <title>Database 1</title>
  </head>
  <body>
    <form name="contactform" method="post" action="">
      <table id="Forms" width="100%">
        <col width="10%" >
        <col width="30%" >
        <col width="30%" >
        <col width="30%" >
        <tr>
          <th style="background-color:#7FCCCC"> Fields </th> 
          <th style="background-color:#7FCCCC"> DB 1 </th> 
          <th style="background-color:#7FCCCC"> DB 2 </th> 
          <th style="background-color:#7FCCCC"> DB Nueva </th> 
        </tr>
        <tr style="background-color:#CCCCCC">
          <td style="font-weight:bold"> Fecha UTC </td> 
          <td> <input type="checkbox" name="FechaUTC1" onclick="CopyF(this.form)" value="September 14" align="right"> September 14 </td>  
          <td> <input type="checkbox" name="FechaUTC2" onclick="CopyF2(this.form)" value="November 17" align="right"> November 17 </td> 
          <td> <input type="text" name="FechaUTC3" size="60"> </td> 
        </tr>
      </table>

        <!-- <tr>
          <td style="font-weight:bold"> Fecha Local </td> 
          <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
          <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
          <td> <input type="text" name="FechaLoc3" size="60"> </td> 
        </tr>

        -->
        </table>
      <p>
        <input type="submit" value="Submit">   
      </p>
    </form>
  </body>
</html>

JS:

function CopyF(f) {
  if(f.FechaUTC1.checked == true) {
    f.FechaUTC3.value = f.FechaUTC1.value;
    if(f.FechaUTC2.checked == true)
        f.FechaUTC2.checked = false;
  }
}

function CopyF2(f) {
  if(f.FechaUTC2.checked == true) {
    f.FechaUTC3.value = f.FechaUTC2.value;
    if(f.FechaUTC1.checked == true)
        f.FechaUTC1.checked = false;
  }
}

最佳答案

对于问题的第一部分，我相信您最好使用单选按钮，因为它已经具有您尝试使用的功能类型(只能单击其中一个)。您可以很容易地添加第三个选项，即“其他”，从而启用您可以写入的输入框。

确保它不会崩溃的最简单方法是确保每组单选框的行号是唯一的。

我在这里使用一个名为 jQuery 的库。它非常受欢迎，并且具有许多内置功能。如果您之前从未使用过 jQuery，我建议您访问 CodeSchool并至少完成第一部分，以熟悉我所写的内容。

$(function() {
  // this way of calling the dollar sign ($) function is a shorthand for $(document).ready();
  $('input.fecha-unico').on('click', function() {
    //I am adding an event to all inputs with the class 'fecha-unico'
    var $this = $(this); //the this object is itself just the HTMLElement object from your browser. Here I am wrapping it in the jquery functions to allow myself access to the functions jquery has.
    var $input = $this.closest('tr').find('input:text');
    //I am finding the closest TR to this radio element, and then searching ('finding') a textbox child.
    if ($this.val() == '-1') {
      //If this checkbox's value is -1, it means we are using the 'other' checkbox, and need to enable the text input.
      $input.prop('disabled', false);
    } else {
      //Otherwise, we need to make sure the writing thing is disabled (say you clicked the other box but then realized you wanted the first checkbox instead).
      if (!$input.prop('disabled')) {
        $input.prop('disabled', true)
      }
    }
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="contactform" method="post" action="">
  <table id="Forms" width="100%">
    <col width="10%">
      <col width="30%">
        <col width="30%">
          <col width="30%">
            <tr>
              <th style="background-color:#7FCCCC">Fields</th>
              <th style="background-color:#7FCCCC">DB 1</th>
              <th style="background-color:#7FCCCC">DB 2</th>
              <th style="background-color:#7FCCCC" colspan="2">DB Nueva</th>
            </tr>
            <tr style="background-color:#CCCCCC">
              <td style="font-weight:bold">Fecha UTC</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC1" value="September 14" align="right">September 14</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC1" value="November 17" align="right">November 17</td>
              <td>
                <label>Other:
                  <input type="radio" class="fecha-unico" name="FechaUTC1" value="-1" />
                </label>
              </td>
              <td>

                <input type="text" name="FechaUTC3" size="60" disabled>
              </td>
            </tr>
            <tr style="background-color:#CCCCCC">
              <td style="font-weight:bold">Fecha UTC</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC2" value="September 14" align="right">September 14</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC2" value="November 17" align="right">November 17</td>
              <td>
                <label>Other:
                  <input type="radio" class="fecha-unico" name="FechaUTC2" value="-1" />
                </label>
              </td>
              <td>

                <input type="text" name="FechaUTC3" size="60" disabled>
              </td>
            </tr>
  </table>

  <!-- <tr>
          <td style="font-weight:bold"> Fecha Local </td> 
          <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
          <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
          <td> <input type="text" name="FechaLoc3" size="60"> </td> 
        </tr>

        -->

  <p>
    <input type="submit" value="Submit">
  </p>
</form>

关于javascript - JS动态更改表中的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40076761/

25 4 0
文章推荐： javascript - 使用嵌套/链接保存解析无响应
文章推荐： c++ - 使用相同的迭代器遍历两个 std::vector
文章推荐： javascript - jquery-如何为具有多个类的元素定义特定的变量类
文章推荐： javascript - 如何删除jquery中先前绑定(bind)的事件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com