使用jQuery遍历html表格

我是jQuery初学者尝试使用jQuery遍历html表格。我经历了与此相关的各种帖子，但没有人能够满足我的问题陈述。使用jQuery遍历html表格

所以下面是样本HTML表：

<table> 
    <tr> 
     <td><input type="text" id="text1"></td> 
     <td> 
      <select> 
       <option value="abc">ABC</option> 
       <option value="def">DEF</option> 
      </select> 
     </td> 
    <tr> 
    <tr>..</tr> 
</table>

我会非常喜欢，形成由管这样分开记录的所有单元格值的字符串：mytext的内容，ABC | mytext2，DEF

尝试以下jQuery的功能，但仍未能达到这个

$(function abc() { 
    $("#save").click(function() { 
     var dataList; 
     var recordList; 
     var i = 0; 
     $('#summaryTable tr').each(function() { 
      alert('tr found'); 
      $(this).find('td').each (function() { 
       alert('td found'); 
       var data = $(this).html(); 
      }); 
     }); 
    }); 
});

任何帮助将是great.Thanks。

来源

2013-08-03 shabeena

什么是mytext和mytext2？ ABC mytext背后有什么逻辑mytext2，DEF'是？ – Cherniv

@Cherniv第一个文本框的样本值 – shabeena

这个问题与Java有什么关系？为什么[tag：java]标签？ –

[编辑]

根据你的问题，例如，TRS具有相同的结构，

那么你需要的是这样的：

是，如果你想要“文本字段值”，“选定值”| “下一个TRS ..”：JSFiddle

JS代码：

var wordVal=""; 
var totalString = ""; 
$('#btn').click(function(){ 
    totalString=""; 
    $('table tr').each(function(i){ 
     $(this).children('td').each(function(j){ 
      if(j==0) wordVal = $(this).children('input').val().trim(); 
      else totalString+= wordVal+','+$(this).children('select').val()+'|'; 
     }); 
    }); 
    totalString= totalString.substring(0,totalString.length-1); 
    console.log(totalString); 
});

JS为（ “文本字段值” 1 “选项1” 代码| “文本字段的值” 2 “选项2” ...等）：JSFiddle

var wordVal=""; 
var totalString = ""; 
$('#btn').click(function(){ 
    totalString = ""; 
    $('table tr').each(function(i){ 
     $(this).children('td').each(function(j){ 
      if(j==0) wordVal = $(this).children('input').val().trim(); 
      $(this).children('select').children('option').each(function(k){ 
       totalString+= wordVal+(k+1)+','+$(this).html()+'|'; 
      }); 
     }); 
     totalString= totalString.substring(0,totalString.length-1)+'\n'; 
    }); 
    console.log(totalString); 
});

来源

2013-08-03 13:25:20 CME64

Yayy！它工作。谢谢:-) – shabeena

@shabeena你欢迎:) – CME64

<label id="l1">Hello Test</label> 
<label id="l2">Hello Test22222</label> 
<input type="button" id="button1" /> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#button1").click(function(){ 
    var a = $('#l1').html(); 
    $("#l1").text($('#l2').html()); 
    $('#l2').text(a); 

    }); 
}); 

</script>

来源

2013-08-03 12:34:00

l1表示什么？ – shabeena

只有id名称，因此任何用户都可以使用不同的id。 –

我有很多组件，并且不想用ID属性理想地遍历 – shabeena

我仍然没有得到逗号和管道，但要尽量

var objs = []; 
$("table :input").each(function(i, v) { 
    objs.push($(v).val()); 
}); 
$("#result").html(objs.join("|"));

而且here is the fiddle。

你可以自己解决它。

来源

2013-08-03 13:07:59 Clxy

var NewString = ""; 
$(".nav li > a").each(function(){ 
    NewString = NewString + "This,"+$(this).text()+"|"; 
});

来源

2013-08-03 13:12:49 Rickyrock

该算法：

$(function() { 
    $('button').click(function() { 
     alert(getString()); 
    }); 

    function getString() { 
     var rows = $('table>tbody>tr'); // all browsers always create the tbody element in DOM 
     var arr = []; 
     for (var i = 0; i < rows.length; i++) { 
      var cells = rows.eq(i).children('td'); 
      var text1 = cells.eq(0).find('input').val(); 
      var text2 = cells.eq(1).find('select').val(); 
      //var text2 = cells.eq(1).find('select option:selected').html();//alternative, if you want to collect the inner html instead 
      arr.push(text1 + ',' + text2); // add string to array 
     } 
     return arr.join('|'); // join the string in array to single string 
    } 
});

http://jsfiddle.net/T9RtQ/2/

来源

2013-08-03 15:06:32 Stano

使用jQuery遍历html表格

回答

相关问题