Question

我已经开始学习HTML和JavaScript，但我无法找到解决以下问题的方法。我有以下HTML代码：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel ="stylesheet" type="text/css" href="StyleSheet.css">
        <script type="text/javascript" src="Script.js"></script>
    </head>
     <body>
        <hr/>
        <table border="1">

            <tr id="e1">
              <td><form id="form2"><input type="hidden" name="id"  />1</form></td>
                  <td><input form="form2" type="hidden" name="name"/>aaa</td>
                  <td><input form="form2" type="hidden" name="description" />xyz</td>
                  <td><input form="form2" type="submit"  onclick="doSmth(this.parent)" value="Details" /></td>
            </tr>

        </table>
    </body>
</html>

通过按下提交按钮，我想将表格行中的所有数据元素（“1”，“aaa”，“xyz”）作为参数解析为我的JavaScript函数以继续它们。我怎样才能以最佳方式执行此操作？我试图将（this）作为参数或（this.parent），但它似乎没有按照我的意图行事。

总而言之，我希望在每一行中提交一个提交按钮的表格。

非常感谢提前

Answer 1

您可以为每个输入元素分配id，然后在脚本中调用它们：

      <table border="1">

        <tr id="e1">
          <td><form id="form2"><input type="hidden" name="id"  />1</form></td>
              <td><input form="form2" id="id1" type="hidden" name="name"/>aaa</td>
              <td><input form="form2" id="id2" type="hidden" name="description" />xyz</td>
              <td><input form="form2" type="submit"  onclick="doSmth()" value="Details" /></td>
        </tr>

    </table>
    <script>
    var myVar1 = getElementById('id1').val();
    var myVar2 = getElementById('id2').val();
    function doSmth (myVar1, myVar2){
        //do something
    }
    </script>

Answer 2

此功能查找所有＆＃34;隐藏＆＃34;表单上的元素，抓取元素后面的任何文本，并将其粘贴到该元素的value字段中。（如果您希望表单实际提交，请删除e.preventDefault（）行）

＆＃13;

var btns = document.querySelectorAll('input[type=submit]');
for (var i=0; i < btns.length; i++) {
  btns[i].addEventListener('click', function (e) {
    e.preventDefault();
    var inps = this.parentNode.parentNode.querySelectorAll("input[type=hidden]");
    for (var i=0; i < inps.length; i++) {
      inps[i].value = inps[i].nextSibling.nodeValue;
    }

    // the rest of the function is just to display the contents of the form
    var f = document.getElementById('e1');
    var o = {};
    for (var i=0, el; el = f.elements[i]; i++) {
      if (el.type == 'hidden' && el.value) {
        o[el.name] = el.value;
      }
    }
    console.log(o);
  });
};

＆＃13;

<form id='e1'>
<table>
<tr>
  <td><input type="hidden" name="id"  />1</td>
  <td><input type="hidden" name="name"/>aaa</td>
  <td><input type="hidden" name="description" />xyz</td>
  <td><input type="submit" value="Details" /></td>
</tr>
<tr>
  <td><input type="hidden" name="id"  />2</td>
  <td><input type="hidden" name="name"/>bbb</td>
  <td><input type="hidden" name="description" />wgh</td>
  <td><input type="submit" value="Details" /></td>
</tr>
</table>
</form>

＆＃13;

Answer 3

使用控件的 form 属性并不适用于所有浏览器（例如IE），因此最好将表单放在整个表格中。

您可以使用元素集合访问表单的所有控件，然后根据逻辑设置每个控件的值。

以下内容将一个提交侦听器附加到表单，循环遍历所有控件，并为每个隐藏控件将其值设置为其父级的 textContent 。

function doSmth(event) {

  // Stop form submitting for now
  event.preventDefault();

  // Within the listener, *this* is the element that called the listener, i.e. the form
  // The form's elements collection gets all the controls in the form
  var controls = this.elements;

  // For each control that is an input, copy the adjacent text to the value
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    var control = controls[i];

    if (control.type == 'hidden') {
      control.value = control.parentNode.textContent;
    }
  }

  // Show values of controls
  [].forEach.call(controls,function(control) {
    console.log((control.name || control.type) + ': ' + control.value)
  }); 
}

window.onload = function() {
  document.forms.form2.addEventListener('submit', doSmth, false);
};

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel ="stylesheet" type="text/css" href="StyleSheet.css">
        <script type="text/javascript" src="Script.js"></script>
    </head>
     <body>
        <hr/>
        <form id="form2">
        <table border="1">
            <tr id="e1">
              <td><input type="hidden" name="id">1</td>
              <td><input form="form2" type="hidden" name="name">aaa</td>
              <td><input form="form2" type="hidden" name="description">xyz</td>
              <td><input form="form2" type="submit" value="Details"></td>
            </tr>
        </table>
        </form>
    </body>
</html>

如何将表行作为参数解析为JS函数onClick？

3 个答案: