使用jQuery遍历HTML表格

Question

我是一个jQuery初学者，尝试使用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();
            });
        }); 
    });
});

希望你能帮忙。谢谢。

- sherry

---

mytext和mytext2是什么？mytext,ABC | mytext2,DEF背后的逻辑是什么？ - Ivan Chernykh

@Cherniv 第一个文本框的示例值 - sherry

这个问题与Java有什么关系？为什么要加上 [tag:java] 标签？ - Hovercraft Full Of Eels

为什么从HTML的“input”中获取文本时，会得到mytext, ABC和mytext2, DEF这样不同的文本呢？（HTML中并没有所谓的“textbox”） - David Thomas

@DavidThomas，你看到了一个文本框和一个下拉菜单，其中有两个选项ABC和DEF。这样，mytext是文本框中的示例值，而ABC是下拉菜单中选择的选项。 - sherry

Answer 1

我还是没明白逗号和竖线，但是试试

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

这里 有一个fiddle。

也许你可以自己解决。

- Clxy

Answer 2

[编辑]

根据你的问题和示例，这些具有相同的结构，

那么你需要的是像这样的东西：

如果你想要 "文本框值"，"选定值" | "下一个" ：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);
});

用于("文本框值"1，"选项1" | "文本框值"2，"选项2" ..等)的js代码：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);
});

- CME64

Answer 3

<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>

- Vishnu Kant Maurya

---

l1代表什么意思？ - sherry

只有ID名称，因此任何用户都可以使用不同的ID。 - Vishnu Kant Maurya

我有很多组件，最好不要使用id属性进行遍历。 - sherry

Answer 4

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

- Rickyrock

Answer 5

算法：

$(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/

- Stano