Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to get all the values of jQuery datatable columns in all rows which contains dropdownlist

I have 5 columns in my jQuery data table and the fifth one is a dropdown list as shown below:

enter image description here

I want to save the data in this data table. So I want to iterate through all the columns of all rows in this data table. The fifth column is a drop down list and the user selects one item from the list. The item’s name is displayed in the dropdown list but each dropdown item has an id value and a text name in it. And "None" is the default value shown in the drop down list at first. The DataSet is used to populate the data table and Dropdown list is also populated with another dataset.

In .cshtml

             <tbody>
              @foreach (System.Data.DataRow row in DataSet.Tables[0].Rows)
              {
              <tr>
                @foreach (System.Data.DataColumn column in DataSet.Tables[0].Columns)
                  {
                      <td>@row[column]</td>
                  }
              <td>
              <div class="ddlPanel">

              <select id="ddlSettingName" name="settingNameList" class="form-control select2">

                  <option value="0">None</option>
                         @foreach (var item in ViewBag.DropdownOptions) // viewbag is dataset
                            {
                              <option value="@item.Value">@item.Text</option>
                            }
               </select>                                        
               </div>
              </td>
             </tr>
             }
           </tbody>

And the code for getting each column values of each row including the id and text value of the dropdown is shown below:

         <script type="text/javascript">

           function Save() {
                
               var newDoorListForAdd = new Array();
               var table = document.getElementById("newTable");
               var tableLength = table.rows.length;
               for (var i = 0; i < tableLength - 1; i++) {            
                    var trial = $("#ddlSettingName option:selected").text();
                    alert(trial);
               }
            }

The above code is not working. I want to get all the values (including id and text value of dropdown selected item) of each row. How can I achieve it ?

Tags:

2

Answers


  1. 0

    use something like this:

    $data = []; // saves all table rows
// loop on each row
$("#table").find("tr").each(function(){
  $tdData = []; 
  // loop on each td indside row
  $(this).find("td").each(function(){
     $tdData.push($(this).text());
  });
  $selectData = [];
  // loop on one select inside row
  $(this).find("select option:selected").each(function(){
     $selectData.push({
       key: $(this).text(),
       value: $(this).attr('value'),
     });
  });
  $data.push({
    'td':  $tdData,
    'select':  $selectData
  });
});
    Login or Signup to reply.
  2. 0

    You can use class="ddlSettingName" instead of id="ddlSettingName".
    I write an example use your code and I hope this help you.

    <table id="newTable">
    <tr>
        <td>setting Name</td>
    </tr>
    <tr>
        <td>
            <div class="ddlPanel">
                <select Class="ddlSettingName" name="settingNameList" class="form-control select2">
                    <option value="0">None</option>
                    <option value="1">AA</option>
                    <option value="2">BB</option>
                    <option value="3">CC</option>
                </select>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="ddlPanel">
                <select Class="ddlSettingName" name="settingNameList" class="form-control select2">
                    <option value="0">None</option>
                    <option value="1">AA</option>
                    <option value="2">BB</option>
                    <option value="3">CC</option>
                </select>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="ddlPanel">
                <select Class="ddlSettingName" name="settingNameList" class="form-control select2">
                    <option value="0">None</option>
                    <option value="1">AA</option>
                    <option value="2">BB</option>
                    <option value="3">CC</option>
                </select>
            </div>
        </td>
    </tr>
</table>
<input  type="button" value="Save" id="Save"/>
<style>
    #newTable tr {
    border:#333 solid 1px;
    line-height:100px;
    }
</style>
@section Scripts {
    <script type="text/javascript">
        $("#Save").click(function () {
            $("#newTable .ddlSettingName").each(function () {
                console.log($(this).val())
                console.log($(this).find("option:selected").text());
            });
        })
    </script>
}

    the result is:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search