javascript - 动态表ajax替换页面中所有行/表单中的元素

Question

<script type="text/javascript">
 $(document).ready(function() {
 $("#submit<?php echo $resultshome['hskid']; ?>").click(function() {


 $.ajax({
  type  : "POST",
  url   : "/scores/printPOST.php",
   data  : {             
    "subround" : $( document.forms["subround<?php echo $resultshome['hskid']; ?>"] ).serialize() 
    },
   datatype : 'html',
   success: function(data) {                     

    $(document.forms).trigger("reset");
    var x<?php echo $resultshome['hskid']; ?> = document.getElementById("roundid<?php echo  $resultshome['hskid']; ?>");
    if (x<?php echo $resultshome['hskid']; ?>.value = '0')
            {
                    document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[0]=null

            } 
                      }
        });
    });
});


 </script>

您好，这是我的第一篇文章，非常感谢我之前从这里收集到的所有信息，您永远不会知道我从这里学到了多少。谢谢。

所以我的问题是这样的:

上面的 php 引用是 (while $row = {} 中的 sql 查询结果的结果。它们会发生变化，因为它们只是数据库中的 UID。

我选择这种方法是为了解决页面由行组成的事实，每个行都是一个表单，行末尾有一个按钮(它帮助我将表单 ID/NAME 分开，因为我的编程能力有限..)。我还受益于在表的 POST 中捕获 UID。

它基本上都包含在一个 while 循环中..获取 sql，执行下面的脚本，创建一个包含行作为单独形式的表，我希望你明白我在说什么...每个用户都是返回的行，并且是表单 POST 位，其中元素动态命名为 rowid (hskid)...

现在，上面的代码从第一个 $resultshome/row 开始工作，下拉菜单的第一个选项为空，因此它不会显示在列表中(不需要刷新等)，然后它会移至 ROUND2.. . FORM subround 的 roundid，太棒了。但我需要更新所有行元素。

代码序列化数据并转到似乎可以工作的 POST，并且重置会重置构成 FORM 一部分的小按钮。

我想要做的是让这个“document.subround.roundid.options[0]=null”行发生在 while 循环中的行中的所有其他元素上(可能有sql返回结果中有20条结果)

但请记住，这些元素附加了 $resultshome['hskid'] 来帮助我在一页上使用多种表单 - 无需刷新......等等......你知道......所以我不知道如何获取所有已写出的页面，或者我的逻辑是错误的。请指教。

基本上这是一场体育比赛，在第一轮之后，按下提交按钮，在该轮结束时得分的玩家(行)获得分数，然后按下按钮将数据发送到数据库(未显示)在此处的代码中，但是...使用alert(data)显示该数组适合POST)，因此对于所有行中的所有玩家来说它都是ROUND2，因此将它们全部更新为ROUND2是有意义的。第一轮不可能再得分。

我希望一切都有意义，我一直盯着同样的 10 行代码，似乎永远......我知道你们聪明的人会把它包装成大约 20 个字符，就像一个旁注: )

无论如何，我希望如此。

我已经编写 php 和这个 ajax 程序大约两周了，我正在即时将这些全部整合在一起......这可能吗？

谢谢大家。

世界银行。

UPDATE1:HTML 行请求:

 <td>
 <select name="roundid<?php echo $resultshome['hskid']; ?>" id="roundid<?php echo $resultshome['hskid']; ?>">


  <script type="text/javascript">
 // get reference to select element
 var sel<?php echo $resultshome['hskid']; ?> = document.getElementById('roundid<?php echo $resultshome['hskid']; ?>');
var opt<?php echo $resultshome['hskid']; ?> = document.createElement('option'); // create new option element
// create text node to add to option element (opt)

//Meaning below = new Option(text, value, defaultSelected, selected)     http://www.javascriptkit.com/javatutors/selectcontent.shtml
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[0]=new Option("ROUND1", "1", true, false)
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[1]=new Option("ROUND2", "2", false, false)
 document.subround<?php echo $resultshome['hskid']; ?>.roundid<?php echo $resultshome['hskid']; ?>.options[2]=new Option("ROUND3", "3", false, false)

表单(每一行基本上都是一个表单)开头:

<form class="forms" name="subround<?php echo $resultshome['hskid']; ?>" id="subroundid<?php echo $resultshome['hskid']; ?>" >

表单按钮是:

<input name="submit<?php echo $resultshome['hskid']; ?>" id="submit<?php echo $resultshome['hskid']; ?>" value="send" type="button"  />

谢谢。

Answer 1

WilsonB​​ubbles，欢迎来到 StackOverflow。

很容易认为您必须在此类问题中使用 ids，但最简单的解决方案通常不需要 ids。 jQuery 使得遍历 DOM 来查找与单击的节点(在本例中为“提交”按钮)相关的其他节点变得非常简单。

在 HTML 中:

• 确保<select>感兴趣的元素都有class="subround" 。 (也许“subround”不是正确的词，但它可以完成任务)。

而 javascript/jQuery 将是...

$(document).ready(function() {
    $(".forms input[name^='submit']").on('click', function(e) {
        e.preventDefault();
        var $form = $(this).closest('form'),
            $select = $form.find('select.subround'),
            val = $select.val();
        $.ajax({
            type: 'POST',
            url: '/scores/printPOST.php',
            data: {
                'subround': $form.serialize() 
            },
            datatype : 'html'
        }).then(function(data) {
            $(document.forms).trigger('reset');
            if (val == '0') {
                //to remove first option from just this row's select menu
                $select.find("option").eq(0).remove();

                //to remove first option from all rows' select menus
                //$(".forms select.subround option:nth-child(1)").remove();
            }
        });
    });
});

我不太确定是否删除该选项。所以我给了你两行替代代码。

也不清楚为什么您应该仅在 val == '0' 时删除选项。对此，我刚才重复了问题中的内容。