代码之家 › 专栏 › 技术社区 › Trombone0904

获取单击的输入字段行的所有值

jquery html

Trombone0904 · 技术社区 · 4 年前

早上好

也许对你来说是个简单的问题,但对我来说却是一大步;) 我有一张简单的桌子:

<table>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething()" value="11"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething()" value="22"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething()" value="33"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething()" value="44"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething()" value="55"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething()" value="66"></td>
  </tr>
</table>




function doSomething() {
    //code
}

如你所见,我有3行,它们的结构相同。如果单击任何输入字段,函数doSomething将调用。

如果我单击值为44的输入字段,我希望获得此行(第2行)的所有值。

输出应为:

你能解释一下我是如何认识到这一点的吗?

1 回复 | 直到 4 年前

Toxy 4 年前

var doSomething;
$( document ).ready(function() {
    doSomething = function(el) {
    const tdInputChild = $(el).parent().parent().find('input');
    
    console.log('myFieldA',$(tdInputChild[0]).val());
    console.log('myFieldB',$(tdInputChild[1]).val());
  //  For Dynamic you can use loop or map to get val.
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething(this)" value="11"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething(this)" value="22"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething(this)" value="33"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething(this)" value="44"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" onclick="doSomething(this)" value="55"></td>
    <td><input type="text" class="myFieldB" onclick="doSomething(this)" value="66"></td>
  </tr>
</table>

fdomn-m 4 年前

要获取行的所有输入,可以将单击事件添加到行本身。

$("tr").click...

然后使用 $(this).find(".myFieldA")

$("table tr").click(function() {
    console.log($(this).find(".myFieldA").val(), $(this).find(".myFieldB").val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" class="myFieldA" value="11"></td>
    <td><input type="text" class="myFieldB" value="22"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="33"></td>
    <td><input type="text" class="myFieldB" value="44"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="55"></td>
    <td><input type="text" class="myFieldB" value="66"></td>
  </tr>
</table>

在某些情况下,可能会出现 td 您不希望打开单击事件,因此更容易将单击事件添加到您想要的单元格或不想要的单元格之外的所有单元格:

$("td.click").click...
$("td:not(.noclick)").click...

随着事件的进展 (或在 input 如果愿意,您可以访问 tr

var tr = $(this).closest("tr");

$("table tr td:not(.noclick)").click(function() {
    var row = $(this).closest("tr");
    console.log(row.find(".myFieldA").val(), row.find(".myFieldB").val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" class="myFieldA" value="11"></td>
    <td><input type="text" class="myFieldB" value="22"></td>
    <td class="noclick">click here doesn't give values</td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="33"></td>
    <td><input type="text" class="myFieldB" value="44"></td>
    <td class="noclick">click here doesn't give values</td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="55"></td>
    <td><input type="text" class="myFieldB" value="66"></td>
    <td class="noclick">click here doesn't give values</td>
  </tr>
</table>

如果您不知道有多少个输入,只需要一个值数组,那么可以使用 .map

var values = row.find(":input").map((i,e)=> $(e).val()).toArray();

哪里 row 是 tr 从以前和 .toArray() console.log )

$("table tr td:not(.noclick)").click(function() {
    var row = $(this).closest("tr");
    var values = row.find(":input").map((i,e)=> $(e).val()).toArray();
    console.log(values)
})

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></脚本>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldA”value=“11”></td>
<td class=“noclick”>单击此处不提供值</td>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“44”></td>
<td class=“noclick”>单击此处不提供值</td>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“66”></td>
</表>

然后可以对其进行扩展,为您提供一个具有键/值的对象数组

    var values = row.find(":input").map((i,e)=> {
      return { 
        key : e.className, 
        value : $(e).val()
      }
    }).toArray();

$("table tr td:not(.noclick)").click(function() {
    var row = $(this).closest("tr");
    var values = row.find(":input").map((i,e)=> {
      return { 
        key : e.className, 
        value : $(e).val()
      }
    }).toArray();
    console.log(values)
})

<<表>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“22”></td>
<td class=“noclick”>单击此处不提供值</td>
</tr>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“44”></td>
<td class=“noclick”>单击此处不提供值</td>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldA”value=“55”></td>
<td class=“noclick”>单击此处不提供值</td>
</tr>

    var values = {};
    row.find(":input").each((i,e) => 
      values[e.className] = $(e).val()
    );

$("table tr td:not(.noclick)").click(function() {
    var row = $(this).closest("tr");
    var values = {};
    row.find(":input").each((i,e) => 
      values[e.className] = $(e).val()
    );
    console.log(values)
})

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></脚本>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“22”></td>
</tr>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldB”value=“44”></td>
</tr>
<tr>
<td>&书信电报;输入type=“text”class=“myFieldA”value=“55”></td>
<td class=“noclick”>单击此处不提供值</td>
</tr>

Gil 4 年前

$('table tr').click(doSomething);

function doSomething() {
    let vals = [];
    $(this).find('input').each(function() {
        vals.push(this.value);
    });
    console.log(vals.join());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" class="myFieldA"value="11"></td>
    <td><input type="text" class="myFieldB" value="22"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="33"></td>
    <td><input type="text" class="myFieldB" value="44"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="55"></td>
    <td><input type="text" class="myFieldB" value="66"></td>
  </tr>
</table>

dave 4 年前

这在不添加jQuery的情况下非常简单。

在每个表行上添加一个click事件侦听器(您的 tr td 元素)。

,然后将其输出:

let rows = document.querySelectorAll('tr');
let results = document.getElementById('results');

rows.forEach((row) => {

  row.addEventListener('click', getValues);

});

function getValues() {

  let currentRow = event.currentTarget;
  let output = [];
  
  // get the children (your td elements) of the currently clicked row
  for (let i = 0; i < currentRow.children.length; i++) {
    //get the value of the child input element
    output.push(currentRow.children[i].firstChild.value);
  }

  results.innerText= output;

}

<table>
  <tr>
    <td><input type="text" class="myFieldA" value="11"></td>
    <td><input type="text" class="myFieldB" value="22"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="33"></td>
    <td><input type="text" class="myFieldB" value="44"></td>
  </tr>
  <tr>
    <td><input type="text" class="myFieldA" value="55"></td>
    <td><input type="text" class="myFieldB" value="66"></td>
  </tr>
</table>
<br />
<div id="results">

</div>