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();
            });
        }); 
    });
});

任何帮助都会很棒。谢谢。

Answer 1

我仍然没有得到逗号和管道，但请尝试

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

here is the fiddle。

愿你自己解决这个问题。

Answer 2

<强> [编辑]

根据你的问题和例子，trs具有相同的结构，

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

这是你想要“textfield value”，“selected value”| “下一个......”： 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代码（“textfield value”1，“option1”|“textField value”2，“option2”.. etc）： 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);
});

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>

Answer 4

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

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/

使用jQuery遍历html表

5 个答案: