3

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

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

4

5 回答 5

1

我仍然不明白逗号和管道，但试试

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

这是小提琴。

愿你能自己解决。

于 2013-08-03T13:07:59.543 回答
1

[已编辑]

根据您的问题和示例， 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);
});

("textfield value"1,"option1" | "textField value"2,"option2" .. etc) 的 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);
});
于 2013-08-03T13:25:20.607 回答
0 
<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-03T12:34:00.783 回答
0 
var NewString = "";
$(".nav li > a").each(function(){
    NewString = NewString  + "This,"+$(this).text()+"|";
});
于 2013-08-03T13:12:49.620 回答
0

算法：

$(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-03T15:06:32.390 回答