Javascript:如何获取每个类名的项目

Javascript: How to get Items for each ClassName

本文关键字：项目 获取 何获取 Javascript      更新时间：2023-09-26

我需要以下HTML上的一些帮助，我很难从循环中获得结果：
.HTML：

<tr id='row1'>
    <td><input type="text" class="col1"/></td>
    <td><input type="text" class="col1"/></td>
</tr>
<tr id='row3'>
    <td><input type="text" class="col3"/></td>
    <td><input type="text" class="col3"/></td>
</tr>
<tr id='row4'>
    <td><input type="text" class="col4"/></td>
    <td><input type="text" class="col4"/></td>
</tr>


Javascript：

var trow = $("[id*=row]").length;
for (var i = 1; i <= trow; i++) {
    var rows = document.getElementsByClassName('col'+i);
    item = [].map.call(rows, function( row ){
        return row.value;
    });
    var ItemSet = item.join('{}');
    alert(ItemSet);
};


循环在第二个循环停止，我认为这是因为在行限制/长度上。我想不出这个循环的其他循环。感谢您的帮助！

你的错误是依赖于增加i的值，而<input type="text" class="col1"/>之后没有<input type="text" class="col2"/>。

假设所有 <tr> 标记的id以 row 开头，后跟一个正整数，即 row1、row3 等，请考虑以下 HTML，您将值放在列内的文本框中

<table>
  <tr id='row1'>
    <td><input type="text" class="col1" value="DEMO1" /></td>
    <td><input type="text" class="col1" value="DEMO2" /></td>
  </tr>
  <tr id='row3'>
    <td><input type="text" class="col3" value="DEMO3" /></td>
    <td><input type="text" class="col3" value="DEMO4" /></td>
  </tr>
  <tr id='row4'>
    <td><input type="text" class="col4" value="DEMO5" /></td>
    <td><input type="text" class="col4" value="DEMO6" /></td>
  </tr>
</table>
您可以使用属性以选择器 [name^="value"]

开头和属性等于选择器 [name="value"]，如下所示：

$("tr[id^=row]").each(function() {
    // get the index
    var index = $(this).attr("id").replace('row', '');
    // loop through all textboxes with class="col + index" and get the value of
    // each textbox 
    var item = $(this).find("input[type=text].col" + index).map(function(idx, dom) {
      return $(this).val();
    }).get();
    alert(JSON.stringify(item));
});

工作演示：http://jsfiddle.net/zu46bL24/

你可以这样做：

对于您的 html，像这样修改（对所有行和列使用相同的类）：

<tr id='rowclass'>
<td class='colclass'>DEMO</td>
<td class='colclass'>DEMO</td>
</tr>
<tr id='rowclass'>
<td class='colclass'>DEMO</td>
<td class='colclass'>DEMO</td>
</tr>
<tr id='rowclass'>
<td class='colclass'>DEMO</td>
<td class='colclass'>DEMO</td>
</tr>

并且，在 js 中，

var rows = $(".rowclass").each(function(index){
    // for each row, 'this' is the current row
    // the following code will get the columns in current row.
    $(".colclass", this).each(function(){  /* get value of this col */  })
})

这是更新的小提琴： http://jsfiddle.net/ymzrocks/kat7hokr/3/

注意：tr 元素如果不包装表元素，将无法正常工作

.html：

<table>
<tr id="row1">
<td class="col1">DEMO1</td>
<td class="col1">DEMO2</td>
</tr>
<tr id="row3">
<td class="col3">DEMO3</td>
<td class="col3">DEMO4</td>
</tr>
<tr id="row4">
<td class="col4">DEMO5</td>
<td class="col4">DEMO6</td>
</tr>
</table>

.js：

$("tr[id^='row']").each(function()
{
    var rows = $(this).children();
    var set = '';
    rows.each(function()
    {
          set += $(this).text() + ' ';        
    });
    alert(set);
});


jQuery(function($) {
  $("tr[id^=row]").each(function() {
    var id = this.id.replace('row', '');
    var item = $(this).find("td.col" + id).map(function(idx, dom) {
      return dom.innerHTML;
    }).get();
    alert(JSON.stringify(item));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id='row1'>
    <td class='col1'>DEMO1.1</td>
    <td class='col1'>DEMO1.2</td>
  </tr>
  <tr id='row3'>
    <td class='col3'>DEMO3.1</td>
    <td class='col3'>DEMO3.2</td>
  </tr>
  <tr id='row4'>
    <td class='col4'>DEMO4.1</td>
    <td class='col4'>DEMO4.2</td>
  </tr>
</table>

相关文章：