简体   繁体   English

如何遍历表格行以获取所有元素值?

[英]How do I iterate through a table row to get all elements values?

I am creating a table based on code that will create x rows and then each row will have a rowspan="3" Each row has different objetcs (input, select, etc) 我正在基于将创建x行的代码创建表,然后每行将具有rowpan =“ 3”每行具有不同的objetc(输入,选择等)

         - text | input | select | select | input | text
Event 1  - text | input | select | select | input | text 
         - text | input | select | select | input | text  

Event 2

I will ultimately save the "Event 1" and rows to a MySQL DB 我最终将“事件1”和行保存到MySQL数据库

How can I iterate through the 3 rows and get the , text, input and selected option in one array? 如何遍历3行并在一个数组中获取,文本,输入和选择的选项?

I have tried code , for example, 我尝试过代码,例如,

$('select.so').filter(':visible').children(':selected')

which returns the selected results. 它返回选定的结果。

How can I get a list of all elements? 如何获取所有元素的列表?

 function loadTable() {
 var event = new Array();
 event[0] = "200 Yard Medley Relay"
event[1] = "200 Yard Free Style"
$('#sections').append('<table></table>');
var table = $('#meetTable').children();
 for (i = 0; i < event.length; i++) {
table.append('' +
 '<tr id= class="header expand" >' +
 '<th rowspan="3" id="eventNames">' + event[i] + '</th>' +
'<td contenteditable="true">' +
'<select id ="s1" name="swimmerOption" class="so"><?php echo $options; ?>' +
 '</select>' +
 '</td> ' +
   '<td>' +
 '<select class="lane"> ' +
 '<option value="1">1</option>' +
 '<option value="2">2</option>' +
'<option value="3">3</option>' +
 '</select> </td>' +
'<td contenteditable="true" value="">' +
'<input type="text" style="width:70px;text-align: center" class="time" autocomplete="off">' +
'</td> ' +
'<td> ' +
'<select class="place"> ' +
'<option value="1">1</option> ' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'</select>' +
'</td>' 
'</tr> ' +
'<tr>')
 }
 }

How about this one: 这个怎么样:

    var $elements;
    $('tr').each(function(){
       $elements=$(this).find('input, select option:selected');
    });
    var jsArr=$.makeArray($elements); //DOM elements array

You may try something like this. 您可以尝试类似的方法。 The implementation is very straight and simple. 该实现非常简单直接。

<table>
    <tr>
        <td><label>Row1</label></td>
        <td><input type="text"></input></td>
        <td><select><option>1</option><option>2</option></select></td>
    </tr>
     <tr>
        <td><label>Row2</label></td>
        <td><input type="text"></input></td>
        <td><select><option>1</option><option>2</option></select></td>
    </tr>
</table>
<br>
    <input type="button" value="Get Data"/>
    <div id="values"></div>

var values;

$("input:button").click(function()
{
    values = "";
    $("table tr").each(function()
    {
        $(this).find("td").each(function(index)
        {
            if($(this).find("label").text() != undefined)
              values += $(this).find("label").text() + ";";
           if($(this).find("input").val() != undefined)
            values += $(this).find("input").val() + ";";
            if($(this).find("select option:selected").text() != "")
            values += $(this).find("select option:selected").text() + ";";
        });
    });

    values = values.replace(/\;;/g,";");
    $("#values").text(values);
});

http://jsfiddle.net/yqr6zgo6/ http://jsfiddle.net/yqr6zgo6/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何遍历表并从行中提取值并与数据表进行比较 - How do I iterate through a table and extract the values from a row and compare with datatable 如何从 mysql 表中获取所有行,发送 json,遍历数组并显示? - How do I get all the rows from a mysql table, send json, iterate through array and display? 想用 Puppeteer 刮桌子。 如何获取所有行,遍历行,然后为每一行获取“td”? - Want to scrape table using Puppeteer. How can I get all rows, iterate through rows, and then get "td's" for each row? 如何遍历表格中的元素并更改JavaScript中每个元素的背景颜色? - How do I iterate through the elements of a table and change the background color of each element in JavaScript? 如何遍历JavaScript中的表行和单元格并添加值? - How do I iterate through table rows and cells in JavaScript and add the values? 如何遍历表格行并使用 jQuery 获取单元格值 - How to iterate through a table rows and get the cell values using jQuery 如何遍历元素的所有子元素 - How to iterate through all the sub elements of an element 如何遍历google文档中的所有元素? - How do I Iterate over all elements in a google document? 我如何遍历所有ID? - How do I iterate through all the id's? 如何遍历嵌套对象并返回数组中的值? - How do I Iterate through a nested object and return values in an array?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM